Google Map is gray, I don't want it to be gray anymore :( [Archive]

mixelplik

01-12-2010, 02:13 AM

Hi,

I'm trying to complete a phonebook application and can't figure out why my map isn't showing up. Everything works fine, when I check my variables, the xml values are being correctly retrieved, the cookies are functioning properly. My problem is that the map just isn't showing up, I've taken the map code from another/earlier iteration of this application and it works fine in it. What's happening is the map area is showing up as all gray, I do get the MAP SATELLITE and HYBRID buttons in the top corner as well as the google map legal folderal on the bottom. I just can't figure out why the map isn't appearing, I can't do any further debugging until I get the actual map, I think I've been working on this too long and am just missing something simple, can any one help?

PS:

the app grabs entries from an xml file and then when the user types in the name and selects enter the xml entry is displayed, and the map show show the location.,

<html>
<head>

<title>Final Project: Advanced JavasSript/Ajax</title>

<style type="text/css">
img
{
height:200;
width:200;
visibility:hidden;
}

.header
{
Font-size:larger;
Text-decoration:underline;
}

#hotsearch
{
height:16pt;
}
</style>

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7PRkqszxkPFQEQke6-qyRhTlY7DIGOPhKEx8ClHy7ZG44m2OIBRPjmzVobqXHENzFZzaybI5ZnXE1A" type="text/javascript">
</script>

<script type="text/javascript">

var map = null;
var geocoderC = null;

function load() {
sendRequest();
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 3);
geocoder = new GClientGeocoder();
}
getRecent();
}

function addMarkers(){
var response = http.responseXML.documentElement;
addresses = response.getElementsByTagName("ADDRESS");
geocoder = new Array();
marker = new Array();

for(i=0; i<addresses.length; i++){
geocoder[i] = new GClientGeocoder();
if(geocoder[i]){
geocoder[i].getLatLng(
addresses[i].firstChild.data,
function(point){
if(!point){
alert(addresses[i].firstChild.data + " Not found");

}else{
marker[i] = new GMarker(point);
map.addOverlay(marker[i]);
}
}
);
}
}
}

function showAddress(address){
firstobj = address.getElementsByTagName("FIRST");
lastobj = address.getElementsByTagName("LAST");
addressobj = address.getElementsByTagName("ADDRESS");
phoneobj = address.getElementsByTagName("PHONE");

var geocoderC = new GClientGeocoder();
if(geocoderC){
geocoderC.getLatLng(
addressobj[0].firstChild.data,
function(point){
if(!point){
alert(address + " Not found");

}else{
map.setCenter(point, 13);
marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker,'click',function(){marker.openInfoWindowHtml(document.getElementById('name ').innerHTML + ' '+ '<br/>' +addressobj[0].firstChild.data+'<br/>' + phoneobj[0].firstChild.data);});
}
}
);
}
}

function createRequestObject(){
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}

var http = createRequestObject();

/*
==================================================================================================== ===================================================================
==================================================================================================== ===================================================================
*/

function sendRequest(){
http.open('get', 'ajaxphone.xml', true);
http.onreadystatechange = addMarkers;
http.send(null);
getRecent();
welcome();

}

/*=================================================================================================== ==============================================================
==================================================================================================== =============================================================
*/

/*=================================================================================================== ==============================================================
==================================================================================================== =============================================================
*/
function handleRequest(){

if(http.readyState == 4){

document.getElementById('name').innerHTML = " ";
document.getElementById('address').innerHTML = " ";
document.getElementById('email').innerHTML = " ";
document.getElementById('phone').innerHTML = " ";
document.getElementById('hotsearch').innerHTML = " ";
document.getElementById('image').style.visibility = "hidden";
document.getElementById('mail').style.visibility = "hidden";

var response = http.responseXML.documentElement;
listings = response.getElementsByTagName('LISTING');

for(i=0; i < listings.length; i++){

firstobj = listings[i].getElementsByTagName('FIRST');
lastobj = listings[i].getElementsByTagName("LAST");

if(firstobj[0].firstChild.data.toLowerCase() == document.getElementById('first').value.toLowerCase() || lastobj[0].firstChild.data.toLowerCase() == document.getElementById('first').value.toLowerCase() || firstobj[0].firstChild.data.toLowerCase() + " " + lastobj[0].firstChild.data.toLowerCase() == document.getElementById('first').value.toLowerCase()){

firstobj = listings[i].getElementsByTagName("FIRST");
lastobj = listings[i].getElementsByTagName("LAST");
addressobj = listings[i].getElementsByTagName("ADDRESS");
phoneobj = listings[i].getElementsByTagName("PHONE");
emailobj = listings[i].getElementsByTagName("EMAIL");
imageobj = listings[i].getElementsByTagName("IMAGE");

document.getElementById('hotsearch').innerHTML = "";
document.getElementById('name').innerHTML = firstobj[0].firstChild.data + " " + lastobj[0].firstChild.data;
document.getElementById('address').innerHTML = addressobj[0].firstChild.data;
document.getElementById('email').innerHTML = emailobj[0].firstChild.data;
document.getElementById('phone').innerHTML = phoneobj[0].firstChild.data

document.getElementById('send').action = "mailto:" + emailobj[0].firstChild.data;
document.getElementById('mail').value = "Click to email: " + emailobj[0].firstChild.data;
document.getElementById('mail').style.visibility = "visible";

document.getElementById('image').src = imageobj[0].firstChild.data;
document.getElementById('image').style.visibility = "visible";

theAddress = addressobj[0].firstChild.data;
showAddress(listings[i]);
newCookie = firstobj[0].firstChild.data;
setRecent(newCookie);
getRecent();
return null;

}else if(firstobj[0].firstChild.data.toLowerCase() != document.getElementById('first').value.toLowerCase() || lastobj[0].firstChild.data.toLowerCase() != document.getElementById('first').value.toLowerCase()){
document.getElementById('hotsearch').innerHTML = "match not found";
document.getElementById('name').innerHTML = "";
document.getElementById('address').innerHTML = "";
document.getElementById('email').innerHTML = "";
document.getElementById('phone').innerHTML = "";
document.getElementById('image').style.visibility = "hidden";
document.getElementById('mail').style.visibilty = "hidden";
}
}
}
}
/*=================================================================================================== ===============================================================
==================================================================================================== ==============================================================
*/
function hotSearch(){

response = http.responseXML.documentElement;
listing = response.getElementsByTagName("LISTING");

var srchLgth = document.getElementById('first').value.length;

document.getElementById('hotsearch').innerHTML =""

for(i=0; i<listing.length; i++){

firstObj = listing[i].getElementsByTagName('FIRST');
lastObj = listing[i].getElementsByTagName('LAST');

var nameString = firstObj[0].firstChild.data + " " + lastObj[0].firstChild.data;

if(document.getElementById("first").value && nameString.substr(0, srchLgth).toLowerCase() == document.getElementById('first').value.toLowerCase() || document.getElementById("first").value && firstObj[0].firstChild.data.substr(0, srchLgth).toLowerCase() + " " == document.getElementById('first').value.toLowerCase()){

firstObj = listing[i].getElementsByTagName('FIRST');
lastObj = listing[i].getElementsByTagName('LAST');
var clickAr = "";

document.getElementById('hotsearch').innerHTML = document.getElementById('hotsearch').innerHTML + firstObj[0].firstChild.data + " " + lastObj[0].firstChild.data + "<BR/>";
return clickAr;
}
}
}
/*COOKIE PARTY=============================================================================================== =====================================================
==================================================================================================== ==============================================================
*/

function setRecent(newCookie){

if(document.cookie.indexOf('recent1=') != -1){
recentArray = new Array();
recentArray = document.cookie.split(';')
for(i=0; i<recentArray.length; i++){
if(recentArray[i].indexOf('recent1=') != -1){
recent2 = recentArray[i].substr(recentArray[i].indexOf('=')+1)
document.cookie = "recent2=" + recent2
recent1 = newCookie
document.cookie = "recent1=" + recent1
getRecent();
}
getRecent();
}
}else{
recent1 = newCookie
document.cookie = "recent1=" + recent1
}

}

function getRecent(){
var cookieArray = new Array();

if(document.cookie.indexOf('recent1')!= -1){
cookies = document.cookie;
cookieArray = cookies.split(";");
for(i=0; i<cookieArray.length; i++){
if(cookieArray[i].indexOf('recent1=') != -1){
document.getElementById('r1').innerHTML = cookieArray[i].substr(cookieArray[i].indexOf('=')+1)
cookie1 = cookieArray[i].substr(cookieArray[i].indexOf('=')+1);
}
}
if(document.cookie.indexOf('recent2')!= -1){
cookies = document.cookie;
cookieArray = cookies.split(";");
for(i=0; i<cookieArray.length; i++){
if(cookieArray[i].indexOf('recent2=') != -1){
document.getElementById('r2').innerHTML = cookieArray[i].substr(cookieArray[i].indexOf('=')+1)
cookie2= cookieArray[i].substr(cookieArray[i].indexOf('=')+1);
}
}
}
}else{
document.getElementById('r1').innerHTML = "No recent searches."
document.getElementById('r2').innerHTML = " "
}
}

function rec1(){
if(document.cookie){
ck1 = document.cookie
if(ck1.indexOf('recent1=') != -1){
document.getElementById('first').value = cookie1;
}else{

}
}
}

function rec2(){
ck2 = document.cookie
if(ck2.indexOf('recent2=') != -1){
document.getElementById('first').value = cookie2;
}else{
}
}

/*=================================================================================================== ===============================================================
==================================================================================================== ==============================================================
*/

function welcome(){
welcomeArrayFilter = new Array();
welcomeArrayFilter = document.cookie.split(";");

if(document.cookie.indexOf("greeting=") != -1){
for(i=0; i<welcomeArrayFilter.length; i++){
if(welcomeArrayFilter[i].indexOf("greeting=") != -1){
welcomeCookie = welcomeArrayFilter[i].substr(welcomeArrayFilter[i].indexOf("=")+1)
document.getElementById('welcome').innerHTML = "Welcome back " + welcomeCookie;
document.getElementById('not').innerHTML = "Not " + welcomeCookie + "?" + " Enter your name and click submit" + "</BR>"
}
}
}else{
document.getElementById('welcome').innerHTML = "Welcome to the phonebook application!";
document.getElementById('not').innerHTML = "Enter your name and click submit" + "</BR>";
}
}

function setWelcomeCookie(){
document.getElementById('submit_txt').style.visibility = "hidden";
document.getElementById('submit_btn').style.visibility = "hidden";
document.getElementById('submit_prompt').style.visibility = "hidden";
greeting = document.getElementById('submit_txt').value;
document.cookie = "greeting=" + greeting
document.getElementById('welcome').innerHTML = "Hello " + greeting;
document.getElementById('not').style.visibility = "hidden";
}
/*END JAVACRIPT=========================================================================================== ========================================================
==================================================================================================== ==============================================================
*/

</script>

</head>
<body onLoad="load()" onUnload="GUnload()">


<span id="welcome" class="header"></span>
<span id="submit_prompt" class="header"></span>
<form>
<span id="not"></span><input type="text" id="submit_txt" id="welcome" />
<input type="button" id="submit_btn" value="Submit" onClick="setWelcomeCookie()" />
</form>


</br></br>
<div id="hotsearch"></div>
</br></br>

<form>
<input type="text" id="first" onKeyUp="hotSearch();"/>
<input type="button" value="Search Phonebook" onClick="handleRequest()"/>
</form>





<div id="map" style="width: 500px; height: 300px;"></div>

<div id="name"></div>
<div id="first"></div>
<div id="address"></div>
<div id="email"></div>

<form id='send' method="post" action="" enctype="text/plain">
<input id='mail' style="visibility:hidden" type="submit" value="">
</form>
<div id="phone"></div><br/>
<img id="image"></img>

<span class="header">Recent Searches</span></br>
<span id='r1' onClick="rec1();" onMouseDown="document.getElementById('r1').style.background = 'red'" onMouseOver="document.getElementById('r1').style.background = 'green'" onMouseOut="document.getElementById('r1').style.background = 'white'"></span><br/></body>

<span id='r2' onClick="rec2();" onMouseDown="document.getElementById('r2').style.background = 'red'" onMouseOver="document.getElementById('r2').style.background = 'green'" onMouseOut="document.getElementById('r2').style.background = 'white'"></span>
<br><br>

<div id="cookieString"></div>
</body>

</html>