How To: Create a custom Google map icon

I had found some very valuable resources when I was starting to develop Google maps:

The Google Maps API Reference http://code.google.com/apis/maps/documentation/reference.html

Google Maps API Tutorial http://econym.googlepages.com/index.htm

For specifically creating custom Google maps icons http://googlemapsapi.blogspot.com/2007/04/labeledmarker-v10-do-more-with-your.html

As valuable as those references are I often had a lot of hit and miss trying to get the various pieces to work together. I hope this blog will help someone see how the various pieces get stitched together.

A JavaScript function to create the marker and set up the event window

// point = new GLatLng(lat,lng);
// infoWindowText = text to be displayed in the info "balloon"
// type = which icon to use
// count = which item in the group we are processing (e.g. item 16 out of 120 total) 
function createMarker(point,infoWindowText,type,count) {
          var xOffset = -1;
          var yOffset = -29;
         
// to get the number to appear within our mappin, the xoffset
// had to be adjusted depending upon what numbered item the
// current location is within our result set
          if(count > 99)
            xOffset = -7;
         
          else if(count > 9)
            xOffset = -4;
         
          bounds.extend(point);
          // need to create 1icon for each number will have
// GIcon is explained at http://code.google.com/apis/maps/documentation/reference.html#GIcon
            var Icon = new GIcon(baseIcon);
// background is a previously defined array of icon "types", each of which points to its own
// specific .gif
// e.g. background["Gold"]  = "../images/mappins/lorange.png";
            Icon.image = background[type];
            opts = {
              "icon": Icon,
              "clickable": true,
              "labelText": parseInt(count)+1,
              "labelClass": "MapIcon",
              "labelOffset": new GSize(xOffset, yOffset)
            };
// LabeledMarker is explained at http://googlemapsapi.blogspot.com/2007/04/labeledmarker-v10-do-more-with-your.html
        var marker = new LabeledMarker(point, opts);

// openInfoWindowHtml is explained at http://code.google.com/apis/maps/documentation/reference.html
// this tells the screen to display an info "balloon" when the user clicks this point on the map
            GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(infoWindowText);
        });
        i++;
        return marker;
       
      }

in the main Javascript code you will have the following

// create the marker
var marker = createMarker(point,name,html,type,i);
// addOverlay is explained at http://code.google.com/apis/maps/documentation/reference.html
// adds the newly created marker as an overlay on the map
map.addOverlay(marker);