Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Can someone tell me what's wrong with this JavaScript?

N

nick9191

macrumors 68040
Original poster
Feb 17, 2008
3,407
316
Britain
Right, I'm in the process of creating a web app using Google Maps. What the following code should do is retrieve some xml code from a page, then load it on to the map, using the geocoder to get lat/long values from the address. Most of it's just Google code I've mauled about with. But it wont load, my JavaScript knowledge is not excellent, and Firebug doesn't seem to help. Basically the page will not load at all.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps AJAX + mySQL/PHP Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=blahblah"  
       type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    
    var id = null;
    var adress = null;
    var image = null;
    var point = null;
    var pointer = null;

    var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["restaurant"] = iconBlue;
    customIcons["bar"] = iconRed;
        
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(52.2725, -0.8825), 12);
        geocoder = new GClientGeocoder();
        
        GDownloadUrl("phpsqlajax_genxml3.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            id = markers[i].getAttribute("ID");
            address = markers[i].getAttribute("ADDRESS");
            image = markers[i].getAttribute("IMAGE");
            var point3 = showAddress(address);
            var marker = createMarker(pointer, id, address, image);
            map.addOverlay(marker);
          }
        });
      }
    }
    
    function showAddress(address) {
            point = geocoder.getLatLng(address,function(point) {
   				if (!point) {
        			alert(address + " not found");
      			} 
      			else 
      			{
      				pointer = new GLatLng(point);
      				return pointer;
      			}
      		}
      	});

    function createMarker(pointer, id, address, image) {
      var marker = new GMarker(pointer);
      var html = "<b>" + ID + "</b> <br/>" + ADDRESS + "</b> <br/>" + IMAGE;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>
  </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Thank you in advance guys.
 
There appears to be a problem with the function showAddress(address). The body onload won't work unless that function is removed.

For testing I just changed the function load to this simple alert dialog.

Code: 
function load() {
      alert('testing...');
    }


But it would not show the alert on the page load until I removed the showAddress(address) function so this is where I'd start looking for the problem in the code.
 
harpster said:
There appears to be a problem with the function showAddress(address). The body onload won't work unless that function is removed.

For testing I just changed the function load to this simple alert dialog.

Code: 
function load() {
      alert('testing...');
    }


But it would not show the alert on the page load until I removed the showAddress(address) function so this is where I'd start looking for the problem in the code.
Click to expand...
Excellent :) I'll take a look and report back.

Thanks.
 
Code: 
function showAddress(address) {
	point = geocoder.getLatLng(address,function(point) {
		if (!point) {
			alert(address + " not found");
		} 
		else 
		{
			pointer = new GLatLng(point);
			return pointer;
		}
	});
}

That will fix show Address. Just a syntax problem.
 
elppa said:
Code: 
function showAddress(address) {
	point = geocoder.getLatLng(address,function(point) {
		if (!point) {
			alert(address + " not found");
		} 
		else 
		{
			pointer = new GLatLng(point);
			return pointer;
		}
	});
}

That will fix show Address. Just a syntax problem.
Click to expand...

That loads the map, unfortunately none of the markers are displaying.

Thanks a bunch though :)
 
Hi again, I'm still having big trouble getting the markers to load :(

Anyone got any tips? Thanks.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back