Home/ Questions/Q 6697973
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:31:24+00:00

I need to know that how to add multiple markers on google maps v3

  • 0

I need to know that how to add multiple markers on google maps v3 from addresses. I am working on a website which has list of 10 businesses with their address per page and a map to locate them. I implimented a map for only one business but I need to know how to impliment for multiple addresses stored in variable named address1,…2,…3,…4. Following are my codes for one business:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">  
var map;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 14,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);    
var address = '52+E+20th+St, New+York, NY';
var address1 = '42+E+29th+St, New+York, NY';
var address3 = '56+W+25th+St, New+York, NY';
var address4 = '26+W+21th+St, New+York, NY';

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>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:250px"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Recently did roughly the same thing: in the below example, r contains a map center latitude and longitude, and a list of markers. Each marker has again a latitude and longitude, some text to show for the marker, and an index variable to use a different icon for each result.

    Multiple markers are added by simply creating them, and giving the same map instance. The maps library is smart enough to show them all.

    var latlng = new google.maps.LatLng(r.dest.lat, r.dest.lng);
var myOptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
window.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

for (marker in r.markers)
{
    var m = r.markers[marker];
    var d = new google.maps.Marker({ position: new google.maps.LatLng(m.lat, m.lng),
                                     map: map,
                                     title: m.text,
                                     icon:"http://www.google.com/mapfiles/marker" + m.l + ".png" });
}
    • 0