Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
45
rated 0 times [  52] [ 7]  / answers: 1 / hits: 15323  / 12 Years ago, sun, december 9, 2012, 12:00:00

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

More From » image

 Answers
64

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.


[#81525] Friday, December 7, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kevenirvina

Total Points: 315
Total Questions: 112
Total Answers: 84

Location: Vanuatu
Member since Fri, May 13, 2022
2 Years ago
;