Google Maps : Issue regarding marker icons and geocoding

Question

I have created a jsp where i have converted the addresses into markers using geocoder class in google maps. Now the only problem i\'m facing is that when i\'m trying to chan

Answer 1

This is a common problem (usually encountered with infowindows), it can be solved with function closure (a "createMarker" function is one option).

function createMarker(map, latlng, address, image) {
        var marker = new google.maps.Marker({
            map: map,  
            icon: 'http://www.google.com/mapfiles/marker'+image+'.png',
            position: latlng
        });
        var info = new google.maps.InfoWindow({
            content: address+', India'
        });
        google.maps.event.addListener(marker, 'click', function() {
            info.open(map, marker);
        });
  return marker;
}

call it inside your loop like this:

geocoder.geocode({
      'address': address[i]+", India"
   },function(results, status){
      if(status == google.maps.GeocoderStatus.OK) {
        var marker = createMarker(results[0].geometry.location, address[i], images[i]);
      }
   });

working example (the code you posted didn't behave as you described, includes function closure for the geocoding operation as well)

UPDATE: You also need function closure on the address (a "geocodeAddress" function):

function geocodeAddress(map, address, i) {
   geocoder.geocode({
      'address': address+", India"
   },function(results, status){
      if(status == google.maps.GeocoderStatus.OK) {
    var marker = createMarker(map, results[0].geometry.location, address, images[i]);
      }
   });
}

So your processing loop becomes:

var i=1;
for(i=0; i<address.length; i++){
  geocodeAddress(map, address[i], i);
}

code snippet:

var geocoder;
var address = new Array();
var marker = new Array();
var images = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"];

function initialize() {
    var locations = 'Pune\;Mumbai\;';
    // locations=locations.substring(0,(locations.length)-1); 

    var map = new google.maps.Map(document.getElementById('googleMap'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 8
    });

    if (locations == 'null' || locations == '')
      locations = 'Pune, INDIA\;';

    address = locations.split('\;');

    marker[0] = new google.maps.Marker({
      map: map
    });

    geocoder = new google.maps.Geocoder();
    var i = 1;
    for (i = 0; i < address.length; i++) {
      geocodeAddress(map, address[i], i);
    }

    geocoder.geocode({
      'address': address[0] + ", India"
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        //         marker[0].setPosition(results[0].geometry.location);
        map.setCenter(results[0].geometry.location);
        new google.maps.Circle({
          center: results[0].geometry.location,
          radius: 1000, // radius * 1000,       // Convert to meters
          fillColor: '#00ff00',
          fillOpacity: 0.2,
          map: map,
          strokeColor: '#0000ff',
          strokeOpacity: 0.3,
          strokeWeight: 1
        });
      }
    });
  } //End of initialize function.  

function geocodeAddress(map, address, i) {
  geocoder.geocode({
    'address': address + ", India"
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marker = createMarker(map, results[0].geometry.location, address, images[i]);
    }
  });
}

function createMarker(map, latlng, address, image) {
  var marker = new google.maps.Marker({
    map: map,
    icon: 'http://www.google.com/mapfiles/marker' + image + '.png',
    position: latlng
  });
  var info = new google.maps.InfoWindow({
    content: address + ', India'
  });
  google.maps.event.addListener(marker, 'click', function() {
    info.open(map, marker);
  });
  return marker;
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>