Question

142

Google Maps JS API v3 - Simple Multiple Marker Example with Custom Markers

rated 0 times [ 143] [ 1] / answers: 1 / hits: 16221 / 13 Years ago, thu, april 14, 2011, 12:00:00

Here is a great example of a simple Google Map:
Google Maps JS API v3 - Simple Multiple Marker Example

I am trying to add to this example the ability to assign each maker a custom Icon.
Given the linked example:

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] ];

I am thinking something like:

var locations = [   

['Bondi Beach', -33.890542, 151.274856, 4,'images/icon1.png'],   

['Coogee Beach', -33.923036, 151.259052, 5,'images/icon2.png' ],   

['Cronulla Beach', -34.028249, 151.157507, 3,'images/icon3.png' ],   

['Manly Beach', -33.80010128657071, 151.28747820854187, 2,'images/icon4.png' ],   

['Maroubra Beach', -33.950198, 151.259302, 1,'images/icon5.png' ] ];

Thanks in advance for your answers!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

allanw

Add To Favorites

Follow

Total Points: 421

Total Questions: 132

Total Answers: 102

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

answered 13 Years ago jimmieo · Accepted Answer

Here is a simple JSFiddle Demo showing a custom marker created with the following codes.
You can customize the icon of your marker with the icon parameter when creating a marker. For instance:

var marker = new google.maps.Marker({

   position: latlng,

   map: map,

   icon: 'http://www.kjftw.com/gmap/images/icons/numeric/red10.png',

   zIndex: Math.round(latlng.lat() * -100000) << 5

});

You can set the icon param with the location of your custom marker image. Or in your case something like this:

for(var i=0; i<locations.length; i++){

     myGlobalMarker.push(new google.maps.Marker({

          position: new google.maps.LatLng(locations[i][1], locations[i][2]),

          map: map,

          icon: locations[i][4],

          title: locations[i][0]

     });

}

Where assuming locations[i][1] is the lat and locations[i][2] is the lng. This is not tested, but it's a base for what you can do to create custom icon. myGlobalMarker is a global variable array that holds all markers. I am not 100% sure if absolute URL or relative URL is needed for the icon location. However, in my Google Map app i was able to use relative path to display custom icon on my marker. This is the final result:
enter