CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
KJS
KJS

Reputation: 1214

Google Maps: set custom color for type of markers

I'm trying to set colored markers in Google maps, so that every location type has its own color.

var markers = [
      ['Buy Jeans', latitude,logitude,'store'],
      ['Eat well', latitude,logitude,'restaurant'],
      ['Get drunk', latitude,logitude,'bar']
];

Below is how we run through the available markers. But I can't figure out how to give 'store' a red pin, 'restaurant' a blue pin and 'bar' a green pin

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

Is there any way to set the icon in the for-loop based on markers[i][3]?

Upvotes: 0

Views: 1181

Answers (2)

KJS
KJS

Reputation: 1214

I solved the problem with:

if(markers[i][3] == "store") { showIcon = "http://maps.google.com/mapfiles/ms/icons/red-dot.png"; }
if(markers[i][3] == "restaurant") {  showIcon = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"; }
if(markers[i][3] == "bar") {  showIcon = "http://maps.google.com/mapfiles/ms/icons/green-dot.png"; }

marker = new google.maps.Marker({
    position: position,
    map: map,
    title: markers[i][0],
    icon: showIcon
});

Upvotes: 3

Zach Babb
Zach Babb

Reputation: 668

You'll want to add an icon property to your markerOptions utilizing the fillColor property for symbols. https://developers.google.com/maps/documentation/javascript/reference#Symbol

marker = new google.maps.Marker({
    position: position,
    map: map,
    title: markers[i][0],
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: "red"
    }
});

Upvotes: 0

Related Questions