CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Javier Manzano
Javier Manzano

Reputation: 4821

custom google maps icons

Is there any way to create custom dynamic icons for the markers?

What I want to create is a list of points and put a number "n" within markers specifying it's the n-th element.

Upvotes: 0

Views: 368

Answers (1)

Ben D
Ben D

Reputation: 14479

Yes. You can either use custom icons with Numeric Markers or the built-in numbering system on Google has for markers.

Assuming the last option (not using custom markers), your marker definition code would look like:

var NUMBER_SHOWN='34';
var ICON_COLOR = 'ff6600';
var ICON_TEXT_COLOR = '000000';
var marker = new google.maps.Marker({  
       position: [LatLong Obj],   
       map: [Map Obj],  
       icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+NUMBER_SHOWN+'|'+ICON_COLOR+'|'+ICON_TEXT_COLOR  
        });

I believe this only works for two-digit number, though I'm not sure.

EDIT Geocodezip has correctly pointed out that the second approach has now been deprecated, so it looks like you're stuck using the first approach (using google's custom numbered-icons). Have a look at Daniel Vassallo's answer here on how to use it. If none of the markers fit your needs (colors, look, etc) you can create your own custom markers for each of the numbers (if you know how, you can write a server-side script that you can pass GET vars to and have it build the icon for you using GD etc, but you can also just build all the icons by hand)

Upvotes: 1

Related Questions