/ Published in: JavaScript
This code was re-purposed from Pamela Fox's MapIconMaker v1.1 to work with Google Maps API v3. - new snippet as FAV toggle not working
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
function createLabeledMarkerIcon (opts) { var primaryColor = opts.primaryColor || "#DA7187"; var strokeColor = opts.strokeColor || "#000000"; var starPrimaryColor = opts.starPrimaryColor || "#FFFF00"; var starStrokeColor = opts.starStrokeColor || "#0000FF"; var label = MapIconMaker.escapeUserText_(opts.label) || ""; var labelColor = opts.labelColor || "#000000"; var addStar = opts.addStar || false; var pinProgram = (addStar) ? "pin_star" : "pin"; var baseUrl = "http://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl="; var iconUrl = baseUrl + pinProgram + "'i\\" + "'[" + label + "'-2'f\\" + "hv'a\\]" + "h\\]o\\" + primaryColor.replace("#", "") + "'fC\\" + labelColor.replace("#", "") + "'tC\\" + strokeColor.replace("#", "") + "'eC\\"; if (addStar) { iconUrl += starPrimaryColor.replace("#", "") + "'1C\\" + starStrokeColor.replace("#", "") + "'0C\\"; } iconUrl += "Lauto'f\\"; var icon = {} icon.image = iconUrl + "&ext=.png"; return icon.image; }; /** * Usage ------------- */ function createIcon(color){ var opts = {}; opts.primaryColor = color; var image = createLabeledMarkerIcon(opts); return image; } function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //Create Green Icon Image var image = createIcon('00FF00'); //Create Marker var myLatLng = new google.maps.LatLng(-33.890542, 151.274856); var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: image }); }