Adding Array of Markers in Google Map

Adding Array of Markers in Google Map

how to add multiple markers on google maps javascript dynamically
google maps api multiple markers by address
google maps custom marker html
embed google map with multiple markers
google maps remove marker
google maps marker icons list
add google map to website with marker
google maps multiple markers

I need some help in creating an array of markers in Google Map so that it can be more efficient, instead of create a marker one by one. I tried the following but it doesn't work. Anyone have advice?

//create array to store a set of location
var collection = new Array();

//a set of locations stored in array
collection[0] = new google.maps.LatLng(13.742167701649997, 100.50721049308777);
collection[1] = new google.maps.LatLng(13.74428, 100.5404525);
collection[2] = new google.maps.LatLng(13.744108, 100.543098);

var pointMarkerImage = new Array();//store image of marker in array
var pointMarker = new Array();//store marker in array

//create number of markers based on collection.length
function setPoint(){
for(var i=0; i<collection.length; i++){

var pointMarkerImage[i] = new google.maps.MarkerImage('marker.png');
var pointMarker[i] = new google.maps.Marker({
        position: collection[i],
        map: map,
        icon: pointMarkerImage[i],
        animation: google.maps.Animation.BOUNCE,
        title: "collection"+ i 
    });

    google.maps.event.addListener(pointMarker[i], 'click', function()    { 
             window.open("blog/page01.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes")
             };
    );
    }
}

This is my simple code and it works fine. When you click on marker, it will open the Info Window respectively based on that marker's location.

<script>
var locations = [
     ['Title A', 3.180967,101.715546, 1],
     ['Title B', 3.200848,101.616669, 2],
     ['Title C', 3.147372,101.597443, 3],
     ['Title D', 3.19125,101.710052, 4]
];
var map = new google.maps.Map(document.getElementById('map'), {
     zoom: 12,
     center: new google.maps.LatLng(3.171368,101.653404),
     mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow;

var marker, i;

for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
         map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
         return function() {
             infowindow.setContent(locations[i][0]);
             infowindow.open(map, marker);
         }
    })(marker, i));
}
</script>

<div data-role="page" id="map_result">
    <div data-role="header" data-position="fixed"><h1>Multiple Marker</h1></div>
    <div data-role="content" style="padding:0;">
        <div id="map"></div>
    </div>
</div>

Is there any limit to number of markers that can be placed on google , maps.push(map); }. This will now have successfully created a map for each location in our Array, to add the markers we need to expand the for loop a little. If you wish to manage a set of markers, you should create an array to hold the markers. Using this array, you can then call setMap() on each marker in the array in turn when you need to remove the


I see a few things:

1) in the for loop, var pointM... should just be pointM... adding the var makes it ignore the set you have outside the for loop.

2) you have a ; after a function that is breaking things.

Try this:

//create array to store a set of location
var collection = new Array();

//a set of locations stored in array
collection[0] = new google.maps.LatLng(13.742167701649997, 100.50721049308777);
collection[1] = new google.maps.LatLng(13.74428, 100.5404525);
collection[2] = new google.maps.LatLng(13.744108, 100.543098);

var pointMarkerImage = new Array();//store image of marker in array
var pointMarker = new Array();//store marker in array

//create number of markers based on collection.length
function setPoint(){
  for(var i=0; i<collection.length; i++){

    pointMarkerImage[i] = new google.maps.MarkerImage('marker.png');
    pointMarker[i] = new google.maps.Marker({
            position: collection[i],
            map: map,
            icon: pointMarkerImage[i],
            animation: google.maps.Animation.BOUNCE,
            title: "collection"+ i 
    });

    google.maps.event.addListener(pointMarker[i], 'click', function(){
      window.open("blog/page01.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes");
    }
    );
  }
}

I recently needed to generate a Google Map with multiple markers and var markers = new Array(); var iconCounter = 0; // Add the markers  In a previous tutorial, I have added an example for adding default map markers for the list of countries by using Google Maps JavaScript API. In this example, it has a database table with a list of countries and custom markers. I retrieve the database result and iterate to plot the countries location on the map layer with custom markers.


I copied Mr Qiqi Abaziz and improved a bit. This is full version

<script type="text/javascript">

function initMap() {

    var locations = [
         ['Title A', 3.180967,101.715546],
         ['Title B', 3.200848,101.616669],
         ['Title C', 3.147372,101.597443],
         ['Title D', 3.19125,101.710052]
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
         zoom: 12,
         center: new google.maps.LatLng(3.171368,101.653404),
         mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow;

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
             position: new google.maps.LatLng(locations[i][1], locations[i][2]),
             map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
             return function() {
                 infowindow.setContent(locations[i][0]);
                 infowindow.open(map, marker);
             }
        })(marker, i));
    }
}

</script>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOURAPIKEY=initMap">
</script>


<style type="text/css">
  #map { height: 400px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    width: 80%;}
</style>

<div id="map"></div>

In this example we are displaying multiple markers on the map, with each marker being clickable to display the info window. Please help me How can I add multiple markers in this code? I searched a lot but I don't know how to add markers in this code? I am new in Google maps API. and sorry if I made any grammatical or sp


Each marker in the array of marker contains the Latitude and Longitude information which will be used to add the marker to the Google Map. addMarker(bangalore, map); } // Adds a marker to the map. function addMarker(location, map) { // Add the marker at the clicked location, and add the next-available label // from the array of alphabetical characters.


Adding multiple markers with InfoWindow to Google Map. The following code snippet consists of an array of markers of different geographic address locations. Multiple markers Google Map API v3 from array of addresses and avoid OVER_QUERY_LIMIT while geocoding on pageLoad. Ask Question Answer to add multiple markers.


Embed customizable maps into your website with Google Maps Javascript API in 3 (fairly) easy steps. add to the $markers array. $markers[] =  Find local businesses, view maps and get driving directions in Google Maps.