asked on

Update google map center with value from input box

Hi
I have this code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

   <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:12,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("map"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);

    function codeAddress() {
        alert("yes");
                  var address = document.getElementById('address').value;
                  geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                      map.setCenter(results[0].geometry.location);
                    }
                    else {
                      alert('Geocode was not successful for the following reason: ' + status);
                    }
                  });
                }

    </script>
</head>
<body>
      <input id="address" type="textbox">
      <input type="button" value="Geocode" onclick="codeAddress()">
 <style>

    #map {
        height: 500px;
        width: 800px;
        }

    </style>
          <div id="map"></div>

</body>
</html>

Open in new window

The map loads fine and centres on London but when I enter a place in the text field and hit enter it doesn't update the center of the map to the new location. What am I missing?

thanks

ASKER CERTIFIED SOLUTION