Creating Custom Google Maps Markers

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Location-based services have become an indispensable part of the Web in recent years. Google Maps is the overwhelming market leader not only in terms of providing search services through its namesake website, but also due to the powerful Google Maps API, which has been integrated into tens of thousands of third-party websites around the globe.

In fact, the Google Maps theme has become so ubiquitous (see Figure 1) that it is easily one of the most recognizable brands on the planet, no small feat given the service was launched only about five years ago.

Figure 1. The Ubiquitous Google Maps Theme

As Figure 1 indicates, Google Maps is capable of denoting the location of landmarks, restaurants, and other points of interest using the familiar red marker. When using Google’s hosted mapping service, these icons are lettered in order to associate the location with an identifying title listed in a sidebar.

Yet the red marker might not be everybody’s cup of tea. What if you wanted to coordinate the colors with others used on your website? Further, the API does not come with support for using lettered markers, instead offering a plain red version, which offers little guidance regarding the marker’s underlying location, particularly when a map is simultaneously displaying multiple positions.

Thankfully, the API offers a great deal of flexibility in terms of marker management, allowing you to swap out the default version with one of your own. By following the simple guidelines I provide in this article, you can create custom Google Maps markers, dramatically improving your map’s usability and overall eye appeal.

Placing a Marker

The recently released Google Maps API V3 streamlines map creation and manipulation in a number of ways, including marker placement. If you’re not familiar with the new version, see my recently published Developer.com introduction to the topic, Introducing the Google Maps JavaScript API V3, which also explains how to place markers on your map. As a quick recap, the following example demonstrates how to place a marker in the middle of a map (bolded code highlights the marker placement syntax):

<script type="text/javascript">   
function initialize() {    
  var latlng = new google.maps.LatLng(39.984577, -83.018692);    
  var options = {     
  zoom: 12,     
  center: latlng,     
  mapTypeId: google.maps.MapTypeId.ROADMAP    
  };    
  var map = new google.maps.Map(document.getElementById("map"), options);

  var marker = new google.maps.Marker({      
    position: latlng,       
    map: map,       
    title:"43201"
  });
}  
</script>

Incorporated into a complete example, the above JavaScript snippet will produce the map presented in Figure 2.

Figure 2. Placing a Google Maps Marker

Placing a Custom Marker

The marker presented in Figure 2 has been placed atop Columbus, Ohio’s university district, which contains The Ohio State University and surrounding student-related neighborhoods. But the default marker does little to reflect the context, so I’ll clarify the location by substituting the default marker with the university marker found in the open source Map Icons Collection download. The revised map is presented in Figure 3.

Figure 3. Placing a Custom Google Maps Marker

Whereas the Google Maps API V2 offered a fairly awkward way to substitute the default marker with your own, adding a custom marker couldn’t be easier using V3. All you need to do is pass that location of the default marker within the object literal passed to the Marker method:

var image = 'icons/university.png';

var marker = new google.maps.Marker({      
    position: latlng,       
    map: map,
    icon: image,
    title:"43201"
  });

Given these new capabilities, let’s create a map that represents several of Columbus’ neighborhoods presented in Figure 4. To be certain, this is much more interesting and lively than the default interface!

Figure 4. Sprucing Up a Google Map of Columbus’ Neighborhoods

Adding Shadows

Readers with a keen eye might have noticed that the custom markers are lacking the subtle shadow of the default marker. While not a serious oversight, the shadow does offer a nice dimensional touch, so let’s go ahead and add one. The Map Icons Collection mysteriously does not include a default shadow marker, however I found a great online service for creating companion marker shadows, aptly called the Google Maps Icon Shadowmaker. I’ve applied the shadow to the script used to create Figure 4, producing the revised map found in Figure 5.

Figure 5. Adding Marker Shadows to Custom Google Maps Markers

Because of the need to offset the shadow from the companion image in such a way that it appears to be cast upon the map, a bit more work is required than what was necessary to place a custom marker. To orient the shadow, you’ll create a new MarkerImage object, passing the shadow’s dimension along with the position, and a new offset relative to the companion image:

var shadow = new google.maps.MarkerImage('icons/shadow.png',
      new google.maps.Size(51, 37),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 37));

The shadow is then passed to the Marker object via the shadow attribute found within the object literal:

var marker = new google.maps.Marker({      
    position: latlng,       
    map: map,
    icon: 'icons/university.png',
    shadow: shadow,
    title:"University District"
  });

Try experimenting with different settings to better understand how the shadow’s position and offset work.

Conclusion

The Google Maps API provides unparalleled abilities to create location-based services, which are limited only by your imagination. Thanks to V3’s incredibly easy customization features, such as the ability to substitute the default markers with custom versions representing museums, schools, stadiums, and more, it’s easier than ever to seamlessly integrate custom mapping features into your websites.

Have you used the Google Maps API’s customization features to create unique maps? Tell us about them (be sure to include a link) within the comments!

About the Author

Jason Gilmore is founder of the publishing and consulting firm WJGilmore.com. He is also the author of several popular books, including “Easy PHP Websites with the Zend Framework”, “Easy PayPal with PHP”, and “Beginning PHP and MySQL, Fourth Edition”. Follow him on Twitter at @wjgilmore.