Google Maps Geocode not working (no markers)

Question

I have a webpage to find latitude, longitude, and get a marker for that position. I use Google Maps.

My webpage get 2 addresses from user input, address 1 and address 2, and calls codeAddress()

<div id="panel">
  <input id="address1" type="textbox" value="">
  <input id="address2" type="textbox" value="">
  <input type="button" value="find!" onclick="codeAddress()">
</div>

This is my JavaScript code:

var map;
var address1 = document.getElementById('address1').value;
var address2 = document.getElementById('address2').value;

function initialize() {
    var latlng = new google.maps.LatLng(-7.275920, 112.791871);
    var mapOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
    var gc = google.maps.Geocoder();
    gc.geocode({
        'address': address1
    }, function (res1, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            gc.geocode({
                'address': address2
            }, function (res2, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    new google.maps.Marker({
                        position: res1[0].geometry.location,
                        map: map
                    });
                    new google.maps.Marker({
                        position: res2[0].geometry.location,
                        map: map
                    });
                }
            });
        }
    });
}

When I click the button find, I didn’t get the markers. Can any body help me?

Answer 1

• update the address variables from the form when the function runs

  function codeAddress() {
    var address1 = document.getElementById('address1').value;
    var address2 = document.getElementById('address2').value;
  

• check for status != OK

  } else alert("Geocode failed of " + address1 + ", status=" + status);
  

• use "new" before the google maps Geocoder constructor

  var gc = new google.maps.Geocoder();
  

• remove existing markers before displaying new ones so the markers don't accumulate on the map

  if (marker1 && marker1.setMap) marker1.setMap(null);
  

complete code:

    var map = null;
    var marker1 = null;
    var marker2 = null;
    var gc = new google.maps.Geocoder();

    function initialize() {
      var latlng = new google.maps.LatLng(-7.275920, 112.791871);
      var mapOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      codeAddress();
    }

    function codeAddress() {
      var address1 = document.getElementById('address1').value;
      var address2 = document.getElementById('address2').value;
      gc.geocode({
        'address': address1
      }, function (res1, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            gc.geocode({
                'address': address2
            }, function (res2, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (marker1 && marker1.setMap) marker1.setMap(null);
                    marker1 = new google.maps.Marker({
                        position: res1[0].geometry.location,
                        map: map
                    });
                    if (marker2 && marker2.setMap) marker2.setMap(null);
                    marker2 = new google.maps.Marker({
                        position: res2[0].geometry.location,
                        map: map
                    });
                } else alert("Geocode failed of " + address2 + ", status=" + status);
            });
        } else alert("Geocode failed of " + address1 + ", status=" + status);
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

working fiddle

Answer 2

Modify the codeAddress function like this:

function codeAddress() {
    var gc = new google.maps.Geocoder(); // notice new keyword
    initialize(); // Calling initialize. If you skip it, maps aren't loading
    gc.geocode({
        'address': address1
    }, function(res1, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            gc.geocode({
                'address': address2
            }, function(res2, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    new google.maps.Marker({
                        position: res1[0].geometry.location,
                        map: map
                    });
                    new google.maps.Marker({
                        position: res2[0].geometry.location,
                        map: map
                    });
                }
            });
        }
    });

Make sure both of the inputs have some value to test it.

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/213/