resize svg icon for google map marker
Solution 1
I'm also unable to resize using scale
. I did find that if I use a MarkerImage
then I can scale the svg and it looks pretty good, way better than a png as far as how smooth it is. I don't think it's a 'symbol' any more if I'm using MarkerImage though.
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: new google.maps.MarkerImage('icons/myIcon.svg',
null, null, null, new google.maps.Size(200,200)),
draggable: false,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I'm still looking for better solution too.
UPDATE (04/14/2015)
I found this on the docs at the bottom of complex icons and just above the link to symbols:
Converting MarkerImage objects to type Icon
Until version 3.10 of the Google Maps JavaScript API, complex icons were defined as MarkerImage objects. The Icon object literal was added in version 3.10, and replaces MarkerImage from version 3.11 onwards. Icon object literals support the same parameters as MarkerImage, allowing you to easily convert a MarkerImage to an Icon by removing the constructor, wrapping the previous parameters in {}'s, and adding the names of each parameter. For example:
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
becomes
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
I was playing around with the size
and scaledSize
and have an example here. It seems like I can comment out the size
and scaledSize
works fine. If the size
is smaller than scaledSize
the graphic gets cut off.
Solution 2
As kaplan pointed out, you can resize SVG markers with size
and scaledSize
. In my case, the result was still buggy - some instances of the same icon were rendered correctly, others left strange artifacts on the map.
I solved this problem in a very simple way: I defined width
and height
in the <svg>
element.
Solution 3
I know this is an old post, so just an update from me.
This works for me without using MarkerImage, but it's imperative that the svg has its width and height properties set.
And you must use the icon property "scaledSize" to set the size of the icon on the map
Solution 4
Here is a solution on scaling markers based on the zoom
var someMarker;
var title = "Some title";
// A SVG flag marker
someMarker = new google.maps.Marker({
position: latlon,
map: map,
icon: {
path: 'M0 -36 L0 -20 24 -20 24 -36 M0 -36 L0 0 1 0 1 -20z', // SVG for flag
scale: 1.0,
fillColor: "#E6BD00",
fillOpacity: 0.8,
strokeWeight: 0.3,
anchor: new google.maps.Point(0, 0),
rotation: 0
},
title:title
});
// scale marker on different zooms
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
var picon = someMarker.getIcon();
if(zoom >=16 && zoom <= 17 && picon.scale != 0.6)
{ picon.scale=0.6;
someMarker.setOptions({icon:picon});
}
else if(zoom == 18 && picon.scale != 0.8)
{
picon.scale=0.8;
someMarker.setOptions({icon:picon});
}
else if(zoom > 18 && picon.scale != 2.0)
{
picon.scale=2.0;
someMarker.setOptions({icon:picon});
}
});
errold
Updated on February 15, 2022Comments
-
errold over 2 years
I'm having problem with icon resizing in google map. I have an svg file for make it responsive.
this is how I call the svg file
MyGreenSVG = { url: 'greenFill.svg', size: new google.maps.Size(20, 35) };
the property: size doesn't change the size of my icon, but only crop it. the only way is to change the width and height in my svg file, and make 2 versions of it. so I loose the interest of using svg...
this is a preview of my svg file :
<svg version="1.1" x="0px" y="0px" width="41.8px" height="74px" viewBox="0 0 41.8 74" enable-background="new 0 0 41.8 74" xml:space="preserve">
-
Joscha about 9 yearsis there anything else you did? For me scale does not seem to do anything in conjuction with a
url
property. -
nickford about 9 yearslikewise,
scale
is not having any effect on my svg -
Kamlesh over 4 yearsThanks Kaplan, You are awesome, It works like charm :)