AikenDrum 0 Newbie Poster

Hi,

I've successfully set up on my website the example geocoded googlemap with markers from here:

http://code.google.com/support/bin/answer.py?answer=65622

I now want to add a search box to geocode a typed in location, and re-center the map on that location. The following code works fine:

<!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>Geocoding With a Map</title>
    <script src="http://maps.google.co.uk/maps?file=api&amp;v=2&amp;key=ABQIAAAAX4g7w-cn0uZeONcdmA1HYBR30_VdjOSbYvp8XHZAJPWnMA2DJRRNtMqmbzS1zsu9lGThbHrg5l-qTQ" type="text/javascript"></script>
    <script type="text/javascript">

      var map = null;
      var geocoder = null;

      function load() 
      {
        if (GBrowserIsCompatible()) 
        {
          map = new GMap2(document.getElementById("map"));        
          map.setCenter(new GLatLng(53.799637, -1.54911), 6);
                
          geocoder = new GClientGeocoder();
        }
      }
    
      function findAddress(anAddress)
      {
        if (geocoder) 
        {
          geocoder.getLatLng(anAddress, function(aPoint) 
          {
            if (!aPoint) 
            {
              alert("Sorry, can't locate [" + anAddress + "]");
            } 
            else 
            {
              map.setCenter(aPoint, 13);
              var elem = document.getElementById("latLng");
              elem.innerHTML = aPoint.lat() + ", " + aPoint.lng();
            }
          });
        }
      }

    </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <form action="#" onsubmit="findAddress(this.address1.value); return false">
      <p>
        <input type="text" size="60" name="address1" value="Type in city/town/village or postcode" />
        <input type="submit" value="Go!" />
      </p>
      <div id="map" style="width: 500px; height: 500px"></div>
      <p>Latitude/Logitude: <span id="latLng">51.500789, -0.142264</span></p>

    </form>
  </body>
</html>

However, when I try to insert this code into the map with markers, it doesn't work. When the location is typed into the search box, the map does not re-center. I've looked at the code until I've gone cross-eyed, and I just cannot figure out why it doesn't work. If anyone can help, I'd be really grateful.

Thanks

Here's the non-working 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=ABQIAAAAX4g7w-cn0uZeONcdmA1HYBR30_VdjOSbYvp8XHZAJPWnMA2DJRRNtMqmbzS1zsu9lGThbHrg5l-qTQ"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    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()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(53.700637, -1.54911), 6);
        geocoder = new GClientGeocoder();

    

     GDownloadUrl("phpsqlajax_genxml.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type);
            map.addOverlay(marker);
          }
        });
      }
    }

     function findAddress(anAddress)
      {
        if (geocoder) 
        {
          geocoder.getLatLng(anAddress, function(aPoint) 
          {
            if (!aPoint) 
            {
              alert("Sorry, can't locate [" + anAddress + "]");
            } 
            else 
            {
              map.setCenter(aPoint, 13);
              var elem = document.getElementById("latLng");
              elem.innerHTML = aPoint.lat() + ", " + aPoint.lng();
            }
          });
        }
      }


    function createMarker(point, name, address, type) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "<b>" + name + "</b> <br/>" + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    //]]>
  </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <form action="#" onsubmit="findAddress(this.address.value); return false">
      <p>
        <input type="text" size="60" name="address" value="" />
        <input type="submit" value="Go!" />
      </p>
      <div id="map" style="width: 500px; height: 500px"></div>
      <p>Latitude/Logitude: <span id="latLng">51.500789, -0.142264</span></p>

    </form>
  </body>
</html>