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.


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.