Home/ Questions/Q 8262563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T03:47:44+00:00

Am pulling my hair out trying getting GeoCoder working. I went so far as

  • 0

Am pulling my hair out trying getting GeoCoder working. I went so far as to just pull the example straight from Google and pasting into my HTML but it still doesn’t work. Here is the code.

The address I capture from my field gets passed back into the geocoding function fine. Everything logs out to my console. But the map just refreshes and nothing happens.

I uploaded the code to my site as well. http://voidkat.com/geo/index.html

Please help!!

Google Maps Multiple Markers

Address:

              <div id="map" style="width: 500px; height: 400px;"></div>

              <script type="text/javascript">
                var geocoder;
                var map;
                var address;
                  function initialize() {
                    geocoder = new google.maps.Geocoder();
                    var latlng = new google.maps.LatLng(-34.397, 150.644);
                    var mapOptions = {
                      zoom: 10,
                      center: latlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    map = new google.maps.Map(document.getElementById("map"), mapOptions);
                  }

                  function codeAddress() {
                    e.preventDefault;
                    var address = document.getElementById("address").value;
                     console.log(address);
                    geocoder.geocode( { 'address': address}, function(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>
            </body>
            </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to put onsubmit onto the form, not onclick on the button.

    Also, to call a function, you must put parentheses after it, even if it doesn’t accept parameters, so it would be e.preventDefault(); not e.preventDefault;. And in the case of onsubmit (or any on), events cannot be canceled inside the function, you must use onsubmit="event.preventDefault(); ...".

    Demo: http://jsfiddle.net/eEEpj/

    Code:

    <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Multiple Markers</title>
  <script src="http://maps.googleapis.com/maps/api/js?sensor=false"
          type="text/javascript"></script>
</head>
<body onload="initialize()">
    <form id="addressForm" onsubmit="event.preventDefault();codeAddress();">
        <div>
        <label for="address">Address:</label>
        <input type="text" name="address" id="address" />
        <input type="submit" id="addressButton" value="Get Coordinates" />
        </div>
    </form>    

  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var geocoder;
    var map;
    var address;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
  }

  function codeAddress() {
     var address = document.getElementById("address").value;
     console.log(address);
    geocoder.geocode( { 'address': address}, function(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);
      }
    });
  }

    /*
    //de infowindowz
    var infowindow = new google.maps.InfoWindow();

    //de markers
    var marker, i;

    //de locationz
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));

    }
    */
  </script>
</body>
</html>
    • 0