Google Map Marker Image Image Position

Question

How can we put a sprite image as a Google map marker. For example: In css we position the image as

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

Now, how to include the above code in the following go-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, you need to specify the source and section size of the image that 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 see this blog post that describes it well

Refresh - see this working Fiddle- DEMO

I used this image http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4 and adjusted the size and dot values ​​for the icon.

Answer 2

Before the MarkerImage class becomes obsolete (which means it is still supported, but needs to be replaced) in favor of the Icon object, you could write 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 should 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) }; 

Pay attention to the additional parameter scaledSize: for simple images, this is the size of the original image, which in this particular case coincides with the size parameter.

For sprites where you have multiple images contained in a single image file, you can 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) }; 

Please note that in this example, the beginning was indicated as (0, 32) in the sprite containing several 16 * 16-pixel images: therefore, here we select the third image in the sprite. Within this part of the image, we set the snap (8, 8) - that is, in the middle of the selected part of the image that should be displayed. Finally, scaledSize here refers to the size of the entire sprite.

Answer 3

You can use the anchor property for MarkerImage , which, as described in here , overrides the default position:

The position in which you want to capture the image in accordance with 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 use icon instead.