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);
        });
    }
}

Solution 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.

Solution 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) - i.e. 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.

Solution 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.

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

Comments

[FR STAR]

Thank you for your quick response. I've tried the following code but it's not working. var google_image = new google.maps.MarkerImage("mydomain.com/images/bodycss/pointer‌​.png", new google.maps.Size(32, 32), new google.maps.Point(28, 32)); And since MarkerImage deprecated I couldn’t understand how do with this icon. Could you please give me an example for my requirement? Actually my sprite image size should to be height: 32px; width:32px and Image path and positions are as follows background: url('../images/bodycss/pointer.png') 28px -32px;

[FR STAR]

I've tried your code and red the blog post that you've given. But unfortunately it doesn't display the marker. The code that I tried is var icon = new google.maps.MarkerImage("mydomain.com/images/bodycss/pointer‌​.png", new google.maps.Size(32, 32), new google.maps.Point(28, 32)); Could you please tell me what's wrong with this ?

[FR STAR]

A Big Thank you for showing the interest on this. But still it doesn't work because I've updated your fiddle script with my sprite image values it doesn't work. See my fiddle example jsfiddle.net/frm683/uXL7H.

[Shiridish]

See the same fiddle now- jsfiddle.net/uXL7H/1. As I told you, you are not adjusting the point and size values correctly. Hope you understood it now. Also I have answered your previous question see if I was correct and you can accept both.

[Shiridish]

You might consider This Question's answer too.

[FR STAR]

sorry about that I just accepted that also, that answer also very worth it.

[Ankur Aggarwal]

@Cdeez this solution is not working in safari. Any idea about that?

[Ankur Aggarwal]

@FRSTAR this solution is not working in safari. Any idea about that?