Google map marker sprite image position

Question

How can we position the sprite image as Google map marker. For eg: In css we are positioning the image like

background: url('../images/bodycss/pointer.png') 28px -32px;

Now how can I include the above code to the below google api-v3 function?

function setMarkers(map, markers) {

    var google_image = new google.maps.MarkerImage("http://example.com/images/bodycss/pointer.png");

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4],
            icon: google_image
        });

        google.maps.event.addListener(marker, "mouseover", function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }
}

Answer 1

To create a MarkerImage from a sprite image, you need to specify the origin and size of the section of the image you want to use to create the icon.

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34));

You can have a look at this Blog post that describes it well

Update - See this working Fiddle- DEMO (sprite url is dead)

I have used this image- http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4 (sprite url is dead) and adjusted the size and point values for the icon.

Answer 2

Before the MarkerImage class became deprecated (which means it's still supported, but should be replaced) in favour of the Icon object, you might have written something like this for a simple image:

var qthIconHouse20 = new google.maps.MarkerImage( 'grafx/house_icon_20.png',
                                    new google.maps.Size(20, 20),
                                    new google.maps.Point(0, 0),
                                    new google.maps.Point(10, 10) );

Now, using the Icon object, you would write this:

var qthIconHouse20 = {  
  url:        'grafx/house_icon_20.png',
  size:       new google.maps.Size(20, 20),
  origin:     new google.maps.Point(0, 0),
  anchor:     new google.maps.Point(10, 10),
  scaledSize: new google.maps.Size(20, 20)
};

Note the extra scaledSize parameter: for simple images, this is the size of the original image - which in this particular case is the same as the size parameter.

For sprites, where you have several images contained in a single image file, you might use something like this:

var qthIconBlueSpot16 = {
  url:        'grafx/qth_icon_spots_16.png',
  size:       new google.maps.Size(16, 16),
  origin:     new google.maps.Point(0, 32),
  anchor:     new google.maps.Point(8, 8),
  scaledSize: new google.maps.Size(16, 48)
};

Note that, in this example, the origin has been specified as (0, 32) in a sprite containing multiple 16*16 pixel images: so here, we're selecting the third image in the sprite. Within that portion of the image, we set the anchor to (8, 8) - ie in the middle of the selected portion of the image to be displayed. Finally, the scaledSize here refers to the size of the entire sprite image.

Answer 3

You can use the anchor property of a MarkerImage which, as documented here overrides the default position:

The position at which to anchor an image in correspondance to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.

ps MarkerImage is deprecated, and you should consider using icon instead.