Google geocoder does not work

Question

This is my index.html file - The part i'm having trouble with is getting the geocode function to work. The form and button show up but nothing happens when i press the button at all.

 <!DOCTYPE html>
<html>
<head>
 <title>First Google Map</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(43.696299,-79.346271); 
    var myOptions = {
     zoom:13,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.MAP
 };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   geocoder = new google.maps.Geocoder();

    var myPlacesKML = new google.maps.KmlLayer('http://mristo.webatu.com/melissaristo/kml/torontodonvalley.kml?ver=1');
    myPlacesKML.setMap(map);

   function geocode() {
   address = document.getElementById("address").value;
   geocoder.geocode({
     'address': address,
     'partialmatch': true}, geocodeResult);
   }
   }
  </script>
</head> 
<body onload="initialize()">
<input type="text" id="address">
<input type="button" onclick="geocode();" value="Geocode it!"
}
</script>
 <body onload="initialize()">
 <div id="map_canvas" style="width:500px; height:400px"></div>
 </body>
 </html>

The form and button show up but the the button doesn't do anything when i click it. Any ideas? I'm very new to this and pretty lost

Please properly indent your code, I can't tell where the functions end or if it's just a nested thing — Sterling Archer, Dec 12 '13 at 17:13
the curly bracket in the line between ? Removing it doesn't seem to change anything. should it not be there? — user3096351, Dec 12 '13 at 23:26

score 1 · Answer 1 · answered Dec 13 '13 at 21:02

This code has a lot of bugs in it. I fixed it up. It will place a marker at the address you input in the text box.

<!DOCTYPE html>
<html>
<head>
 <title>First Google Map</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  var map;
  function initialize() {
    var latlng = new google.maps.LatLng(43.696299,-79.346271); 
    var myOptions = {
     zoom:13,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.MAP
 };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   geocoder = new google.maps.Geocoder();

    var myPlacesKML = new google.maps.KmlLayer('http://mristo.webatu.com/melissaristo/kml/torontodonvalley.kml?ver=1');
    myPlacesKML.setMap(map);
   }

   function geocode() {
   address = document.getElementById("address").value;
   geocoder.geocode({
     'address': address,
     'partialmatch': true}, geocodeResult);
   }

   function geocodeResult( results, status )
   {if (status == google.maps.GeocoderStatus.OK) {
      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);
    }

   }
  </script>
</head> 
<body onload="initialize()">
<input type="text" id="address">
<input type="button" onclick="geocode();" value="Geocode it!">

 <div id="map_canvas" style="width:500px; height:400px"></div>
 </body>
 </html>

Here are the bugs: 1. extra }
2. map variable was local, needed to be global.
3. missing function geocodeResult
4. extra body tag
5. missing closing > from input
6. move geocode() from inside initialize() to global.

Google geocoder does not work

1 Answers1