Home/ Questions/Q 8822187
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T06:02:51+00:00

I need help with Google maps. I want to create a map where I

  • 0

I need help with Google maps. I want to create a map where I could show multiple addresses using multiple pointers. Poblem is that the last address’ pointer icon displays for all addresses. It has probably something to do with the asynchronous geocoder.geocode, but I’m a JS beginner and I’m not able to solve this problem.

Can anyone help please? Thanks.

<html> 
<head> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head> 
<body>
<div id="map" style="width: 500px; height: 500px;"></div>

<script type="text/javascript">


var locations = [
    ['Place A', '2430 N 1060 E, North Logan, UT', 'A'],
    ['Place B', '495 W Jackson Street, Knoxville, IA', 'B'],
    ['Place C', '1900 N Flagler Drive, West Palm Beach, FL', 'C']
]; 


var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 0,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});



var infowindow = new google.maps.InfoWindow();

var marker, i;


for (i = 0; i < locations.length; i++) {  


    var image = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + locations[i][2] + '|FF0000|000000',
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34)
    );

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 
        'address': locations[i][1]
    }, function(results, status){

        if (status == google.maps.GeocoderStatus.OK) {

             marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map, 
                icon: image
            });
        } 
    });

}
</script>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this code:

    var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = createMarker(locations[i]);
}
function createMarker(location) {
  var image = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + location[2] + '|FF0000|000000',
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34)
    );

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 
        'address': location[1]
    }, function(results, status){

        if (status == google.maps.GeocoderStatus.OK) {

             marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map, 
                icon: image
            });
        } 
    });
}
    • 0