How to Make Multiple Markers With Maps API

Using the Google Maps API version three, Google shows locations on a map using push-pin icons called markers. For example, you may want to create a custom map for Paris, France, with markers for monuments, museums and famous restaurants. You create markers using the built-in "Markers" object and define when Google displays multiple markers using the "Drop" function.

Instructions

1. Open your HTML file and scroll down in the code to where you initialize your Google Map.

2. Create the marker by initializing a marker variable and setting the marker parameters. For example, type:

   var eiffelMarker =  paris google.maps.Marker({
         position:(-48.5132,  002.1745)
         map: map, 
         title:"Eiffel Tower"
     });   

   In this example, Google Maps creates a marker for the Eiffel Tower on the Paris map. The "position" attribute is the Eiffel Tower's latitude and longitude coordinates. Eiffel Tower is the name or title a user reads when mousing over the marker.

3. Repeat Step 2 for each marker location on your map. Use descriptive variable names and enter the geo-coordinates for the marker's position. Title the marker with the location's name.

4. Stagger the amount of time that Google drops the markers on the map. If you have numerous markers on a map, for usability purposes, you may prefer dropping the markers one-by-one instead of dumping them on the map all at once. For example, to stagger marker drops, type the following:

   function drop() {
     for (parisMarker i =0; i < markerArray.length; i++) {
       setTimeout(function() {
         addMarkerMethod();
       }, i * 200);
     }
   }

   In this example, Google Maps rotates through your array of markers and drops each marker within a quarter of a second of each other.

References

• Google Code: Google Maps Javascript API V3 Overlays