can't get google map to center

Discussion in 'Google API' started by marklandry, Jul 18, 2012.

0
  1. #1
    Hi,
    I've created a map with php/mysql/ajax according the tutorial provided at the google developers site.

    All works fine but I"m trying to use the geocoder example to center the map per user input. The geocoder script works fine by itself but when I add it to my map code it will pull lat/long but won't center the map.

    I've included my code below for the whole thing - thanx for any help you can provide.

    Mark

    <!DOCTYPE html >  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Tantomedia AON Map</title>
    <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    //<![CDATA[


    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: ''
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: ''
      }
    };
    var map;
    var geocoder;


    function load() {
      geocoder = new google.maps.Geocoder();
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(39.824476,-105.080261),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
 
      var infoWindow = new google.maps.InfoWindow;
      google.maps.event.addListener(map, 'idle', showMarkers);
     
       function showMarkers(){
        var bounds = map.getBounds(); 
           var ne = bounds.getNorthEast();
           var sw = bounds.getSouthWest();
           var neLong = ne.lng();
           var neLat = ne.lat();
           var swLong = sw.lng();
           var swLat = sw.lat();
           //var neLong = -105.011;
           //var neLat = 39.864;
           //var swLong = -105.1489;
           //var swLat = 39.784;
           //alert("NE LAT = "+neLat + "\nNE LONG = "+neLong + "\nSW LAT = "+swLat + "\nSW LONG = "+swLong);
           //tanto ='"'+'phpsqlajax_genxml3.php?swLat='+swLat+'&swLong='+swLong+'&neLat='+neLat+'&neLong='+neLong+'"';
           tanto ="phpsqlajax_genxml3.php?swLat="+swLat+"&swLong="+swLong+"&neLat="+neLat+"&neLong="+neLong;
           //tanto = "phpsqlajax_genxml3.php";
           //alert(tanto);
      // Change this depending on the name of your PHP file
      downloadUrl(tanto, function(data) {
      //downloadUrl("phpsqlajax_genxml3.php", function(data) {
        var xml = data.responseXML;
        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 google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });


          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
     }
    }
  


    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }


    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;


      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };


      request.open('GET', url, true);
      request.send(null);
    }


    function doNothing() {}


function codeAddress() {
    var loc=[];
    var map;
    var address = document.getElementById("address").value;


    // next line creates asynchronous request
    geocoder.geocode( { 'address': address}, function(results, status) {
      // and this is function which processes response
      if (status == google.maps.GeocoderStatus.OK) {
        loc[0]=results[0].geometry.location.lat();
        loc[1]=results[0].geometry.location.lng();
        var addressbox = document.getElementById('address');  
        var latbox = document.getElementById('lat');  
        var longbox = document.getElementById('long'); 
        var testbox = document.getElementById('testbox');
        latbox.value = loc[0];
        longbox.value = loc[1];
        testbox.value = results[0].geometry.location;
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });


    // pretty meaningless, because it always will be []
    // this line is executed right after creating AJAX request, but not after its response comes
    return loc;
    
  }




    //]]>


  </script>






  </head>


  <body onload="load()">
    <div id="map" style="width: 800px; height: 600px"></div>




    <input id="address" type="textbox" value="1135 Eudora st. denver">
    <input type="Submit" value="Submit" onclick="codeAddress()">
    <input id = "lat" type="textbox">
    <input id = "long" type="textbox">
    <input id = "testbox" type="textbox">




  </body>


</html>
    Code (markup):
     
    marklandry, Jul 18, 2012 IP