Using An Image Sprite For Google Maps Markers

Do you have several different icons to display on your Google Map? Use an image sprite to reduce network overhead and improve browser cache hit rate.

Why Sprites?

A sprite image is a file that contains multiple, smaller, images. Each contained image may be referred to by its position within the sprite image file. This technique is often used to display icons such as menu symbols, left/right arrows etc. but can be used for any images or purposes.

An example sprite image file
An example sprite image file

For example I have used background images loaded from a sprite image to display image thumbnails as part of a photo gallery, resulting in a substantial decrease in initial load time compared with performing several requests for individual thumbnails. The advantage over having multiple separate image files is that with a single HTTP request, all of the contained images are available for subsequent use and the browser thereafter can satisfy requests for any of the contained images from its cache. Sprite images are normally accessed within CSS using the background-image tag, but they can also be used within the Google Maps API. The HTML to display a map is simple as shown below, just define a suitable <div> where the map will be displayed (making sure it has either an explicit or implicit height declared), call the Google Maps API script, followed by your Google Maps Javascript.

HTML5

<head>
  <style>
   #map-container {width:300px;height:300px;}
  </style>
</head>
<body>
<!--The Div where the map will be displayed-->
    <div id='map-container'></div>
<!--Call the Google Maps API-->
    <script src='https://maps.googleapis.com/maps/api/js?key=YourGoogleAPIKey&amp;sensor=false'></script>
<!--Include the Javascript to produce the map-->
    <script>... Javascript to display the map....</script>
 

Creating Markers

Creation of the map uses the standard facilities ie set up any map options and create a new map object using those options. Creation of a marker is as standard ie specifying a position, a map object and an optional icon. Normally an icon definition would only require the URL of an image file used to display the icon. When a sprite is used, additional information is necessary.

A sprite icon requires three items of information, the position of the icon image within the sprite file, the size of the sprite image and the URL of the sprite image file.

JAVASCRIPT

var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(51.501864, -0.140623)
    };
var map = new google.maps.Map(
                document.getElementById(
                            'map-container'),
                mapOptions);
//the first marker, with everything expanded for clarity
var houseIcon = {
/*
 Position an image to appear at the lat/long point
 For this image, the marker point is in the middle, at the bottom
*/
  anchor: new google.maps.Point(16, 37),
/*
 Position of the image within the sprite
 In  this sprite,  the images are arranged horizontally
 so 0,0 is the start of the first image and 111,0 is the 3rd image
*/
   origin: new google.maps.Point(111, 0),
/*Size of the sprite image*/
   size: new google.maps.Size(32, 37),
/*url of the sprite image*/
   url: 'http://www.example.com/general-sprite.png'
};
var houseMarker = new google.maps.Marker({
   position: new google.maps.LatLng(51.502066, -0.140122),
   map: map,
   icon: houseIcon
});
/*and the rest of the markers (more efficiently coded)*/
var iconAnchor = new google.maps.Point(16, 37);
var iconSize = new google.maps.Size(32, 37);
var iconUrl = 'http://www.example.com/general-sprite.png';
var birthMarker = new google.maps.Marker({
   position: new google.maps.LatLng(51.500435, -0.139015),
   map: map,
   icon: {
      anchor: iconAnchor,
      origin: new google.maps.Point(74, 0),
      size: iconSize,
      url: iconUrl
    }
});
var workMarker = new google.maps.Marker({
    position: new google.maps.LatLng(51.500214, -0.140936),
    map: map,
    icon: {
       anchor: iconAnchor,
       origin: new google.maps.Point(0, 0),
       size: iconSize,
       url: iconUrl
    }
});
 

The anchor information is optional, if not specified the top left of the icon image will align with the specified latitude/longitude. The icon size is in pixels as horizontal,vertical. The icon origin refers to the top left of the icon, and is in pixels as horizontal,vertical within the sprite image file. So in a sprite with all images arranged horizontally, the vertical value will always be zero and the horizontal value points to the top left point of the icon image.