Advanced Search

Google Map Icon Generator

/ Published in: JavaScript
Save to your folder(s)
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 
  1. function createLabeledMarkerIcon (opts) {
  2.   var primaryColor = opts.primaryColor || "#DA7187";
  3.   var strokeColor = opts.strokeColor || "#000000";
  4.   var starPrimaryColor = opts.starPrimaryColor || "#FFFF00";
  5.   var starStrokeColor = opts.starStrokeColor || "#0000FF";
  6.   var label = MapIconMaker.escapeUserText_(opts.label) || "";
  7.   var labelColor = opts.labelColor || "#000000";
  8.   var addStar = opts.addStar || false;
  9.  
  10.   var pinProgram = (addStar) ? "pin_star" : "pin";
  11.   var baseUrl = "http://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=";
  12.   var iconUrl = baseUrl + pinProgram + "'i\\" + "'[" + label + 
  13.       "'-2'f\\"  + "hv'a\\]" + "h\\]o\\" + 
  14.       primaryColor.replace("#", "")  + "'fC\\" + 
  15.       labelColor.replace("#", "")  + "'tC\\" + 
  16.       strokeColor.replace("#", "")  + "'eC\\";
  17.   if (addStar) {
  18.     iconUrl += starPrimaryColor.replace("#", "") + "'1C\\" + 
  19.         starStrokeColor.replace("#", "") + "'0C\\";
  20.   }
  21.   iconUrl += "Lauto'f\\";
  22.  
  23.   var icon = {}
  24.   icon.image = iconUrl + "&ext=.png";
  25.   return icon.image;
  26. };
  27.  
  28.  
  29. /**
  30. * Usage -------------
  31. */
  32.  
  33. function createIcon(color){
  34.   var opts = {};
  35.   opts.primaryColor = color;
  36.   var image = createLabeledMarkerIcon(opts);
  37.   return image;
  38. }
  39.  
  40. function initialize() {
  41.   var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  42.   var myOptions = {
  43.     zoom: 4,
  44.     center: myLatlng,
  45.     mapTypeId: google.maps.MapTypeId.ROADMAP
  46.   }
  47.   var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  48.  
  49. //Create Green Icon Image
  50.   var image = createIcon('00FF00');
  51.  
  52. //Create Marker
  53.   var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
  54.   var marker = new google.maps.Marker({
  55.       position: myLatLng,
  56.       map: map,
  57.       icon: image
  58.   });
  59. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.