Adding multiple custom markers to a google map using an array

Question

I'm currently working on implementing a google map for my website and stumbled across a great tutorial here which almost got me to the promised land. However, I have one more piece of functionality I'm looking to add. Inside my array I want display one of three different custom markers on my map. Does anyone have any ideas?

Here's a fiddle...

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    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++) {
    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));
}

<div id="map" style="width: 500px; height: 400px;"></div>

possible duplicate of: [Display infowindow by default and different markers in Google Maps](http://stackoverflow.com/questions/16844370/display-infowindow-by-default-and-different-markers-in-google-maps/16844974#16844974) — geocodezip, Oct 20 '15 at 16:55

score 3 · Accepted Answer · answered Oct 20 '15 at 17:08

Simplest solution, add the URLs of the desired icons for the markers to your array:

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
    ['Coogee Beach', -33.923036, 151.259052, 5, "http://maps.google.com/mapfiles/ms/micons/green.png"],
    ['Cronulla Beach', -34.028249, 151.157507, 3, "http://maps.google.com/mapfiles/ms/micons/yellow.png"],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
    ['Maroubra Beach', -33.950198, 151.259302, 1, "http://maps.google.com/mapfiles/ms/micons/blue.png"]
];

Then use that in the marker constructor:

marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: locations[i][4],
    map: map
});

updated fiddle

code snippet:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
  ['Coogee Beach', -33.923036, 151.259052, 5, "http://maps.google.com/mapfiles/ms/micons/green.png"],
  ['Cronulla Beach', -34.028249, 151.157507, 3, "http://maps.google.com/mapfiles/ms/micons/yellow.png"],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
  ['Maroubra Beach', -33.950198, 151.259302, 1, "http://maps.google.com/mapfiles/ms/micons/blue.png"]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  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++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: locations[i][4],
    title: locations[i][0],
    map: map
  });

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

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

<script src="http://maps.google.com/maps/api/js"></script>
<div id="map"></div>

Chris L · Answer 2 · 2015-10-20T16:39:04.170

You haven't told us when you would like to display the custom marker but to display a custom maker you just define the image you want to display and pass is to the marker object as icon: yourMarker.

If you want to add a conditional statement to display a certain marker given a certain condition you can do that using if/else statements.

Here is a fiddle.

http://jsfiddle.net/chrislewispac/jmLq398e/1/

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

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

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

var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 0.05,
    strokeColor: 'gold',
    strokeWeight: 2
};

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]),
      icon: goldStar,
    map: map
  });

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

Reference to the api: https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom

EDIT:

Here is an update fiddle showing how to customize the icon based on geographic location.

http://jsfiddle.net/chrislewispac/jmLq398e/2/

var goldStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: 'yellow',
fillOpacity: 0.8,
scale: 0.05,
strokeColor: 'gold',
strokeWeight: 2
};

var blueStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: 'yellow',
fillOpacity: 0.8,
scale: 0.05,
strokeColor: 'blue',
strokeWeight: 2
};

var marker, i;

for (i = 0; i < locations.length; i++) {
    if (locations[i][1] > -33.9){
      var icon = blueStar
    } 
    else { 
       var icon = goldStar
    }

marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: icon,
    map: map
});

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

Edit # 2

I converted your array of arrays to an array of objects and added a user property. I then adjusted your code to use the object instead of the array index.

var locations = [
{
   name: 'Bondi Beach',
   lat: -33.890542,
   lon: 151.274856,
   user: 1
}, /*[......]*/
{
   name: 'Maroubra Beach',
   lat: -33.950198,
   lon: 151.259302,
   user: 3
}
];

if (locations[i].user === 1){
   var icon = blueStar
} else if (locations[i].user === 2) { 
   var icon = goldStar
}
else if (locations[i].user === 3) { 
   var icon = redStar
}

marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i].lat, locations[i].lon),
    icon: icon,
    map: map
});

http://jsfiddle.net/chrislewispac/jmLq398e/3/

Adding multiple custom markers to a google map using an array

2 Answers2

Linked