Scaling marker size with marker icons from a sprite in Google Maps API v3
After some trial and error, I have figured out how this is supposed to work (the documentation is deceiving), thanks to this blog post.
Here's my new code:
var offset = Math.floor(Math.random() * 3) * 16; // pick one of the three icons in the sprite
// Calculate desired pixel-size of the marker
var size = Math.floor(4*(count-1) + 8);
var scaleFactor = size/16;
// Create custom marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
icon: new google.maps.MarkerImage(
'img/dot.png', // my 16x48 sprite with 3 circular icons
new google.maps.Size(16*scaleFactor, 16*scaleFactor), // desired size
new google.maps.Point(0, offset*scaleFactor), // offset within the scaled sprite
new google.maps.Point(size/2, size/2), // anchor point is half of the desired size
new google.maps.Size(16*scaleFactor, 48*scaleFactor) // scaled size of the entire sprite
)
});
Hope this helps someone down the line!
Maxim Zaslavsky
I'm a computer science student at Princeton University, originally from San Diego, CA. I use machine learning to approach problems in biology and healthcare. My current research applies machine learning to immunology. I wrote my first app (a VB6-powered word-search solver) when I was 7, and I've been hooked on programming ever since. I discovered and got involved in the Stack Overflow community in 2009 (when I was 12). Check out my website for more information or to get in touch.
Updated on July 19, 2022Comments
-
Maxim Zaslavsky almost 2 years
I'm playing with the Google Maps API (v3) and I've run into an issue with marker icons. I'm trying to vary the size of my markers depending on their individual data attributes.
The icons themselves are in a sprite that contains three different circular markers, each 16px by 16px. I'm trying to scale individual icons, but am so far unsuccessful.
Here's my code:
var offset = Math.floor(Math.random() * 3) * 16; // pick one of the three icons in the sprite // Calculate desired pixel-size of the marker var size = Math.floor(4*(count-1) + 8); // Create custom marker var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), icon: new google.maps.MarkerImage( 'img/dot.png', // my sprite with 3 circular icons new google.maps.Size(16, 16), // 16x16 is the original size of each individual icon new google.maps.Point(0, offset), // picking one of the three icons in the sprite new google.maps.Point(Math.floor(size/2), Math.floor(size/2)), // setting correct anchor for the marker new google.maps.Size(size, size) // trying to scale the marker ) });
The problem seems to be at the last line, where I'm trying to scale the marker icon to the desired size. Instead of it scaling properly, I'm getting a weird, distorted ellipse-shaped icon.
What am I doing wrong?
-
natevw about 12 yearsFor those following along at home, the salient point from the linked blog article is: "To display a scaled image or a scaled prite image, just supply the size, origin, anchor and scaledSize parameters with the scale factor applied."
-
Julio Cesar Damas Sanchez about 10 yearsthanks, fyi google.maps.MarkerImage is replaced by google.maps.Icon in v3.10+
-
user908645 about 9 yearsI use scaledSize to downsize the icon used for marker. That works for me. var icon = { url: imageName, scaledSize: new google.maps.Size(8, 12) };