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

admin管理员组

文章数量:1354719

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!

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!

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited May 23, 2017 at 12:26 CommunityBot 111 silver badge asked Apr 14, 2011 at 16:07 blhblh 5311 gold badge11 silver badge44 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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./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:

本文标签： javascriptGoogle Maps JS API v3Simple Multiple Marker Example with Custom MarkersStack Overflow