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

Discussion in 'Web Design and Development' started by nick9191, Apr 1, 2011.

  1. nick9191 macrumors 68040

    Joined:
    Feb 17, 2008
    Location:
    Britain
    #1
    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.
     
  2. harpster macrumors regular

    Joined:
    Jan 26, 2010
    #2
    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.
     
  3. nick9191 thread starter macrumors 68040

    Joined:
    Feb 17, 2008
    Location:
    Britain
    #3
    Excellent :) I'll take a look and report back.

    Thanks.
     
  4. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #4
    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.
     
  5. nick9191 thread starter macrumors 68040

    Joined:
    Feb 17, 2008
    Location:
    Britain
    #5
    That loads the map, unfortunately none of the markers are displaying.

    Thanks a bunch though :)
     
  6. nick9191 thread starter macrumors 68040

    Joined:
    Feb 17, 2008
    Location:
    Britain
    #6
    Hi again, I'm still having big trouble getting the markers to load :(

    Anyone got any tips? Thanks.
     

Share This Page