Google Maps API: маркер SVG перемещается относительно карты при масштабировании
Я создал два маркера на карте, один стандартный маркер, другой, используя путь SVG. Стандартный маркер не перемещается относительно карты при уменьшении, но маркер SVG делает. Вот скрипка, где вы можете увидеть, что я имею в виду:
Есть мысли о том, как заставить маркер SVG занимать свое место относительно карты?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG Marker Moves</title>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<style>
html, body, #map_canvas {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script>
var islandLoc = new google.maps.LatLng(48.692492,-122.908192);
var birdLoc = new google.maps.LatLng(48.692615936699596, -122.90869625529479);
var map = new google.maps.Map(document.getElementById('map_canvas'),{
zoom: 19,
center: islandLoc,
disableDefaultUI: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var island_marker = new google.maps.Marker({
position: islandLoc,
map: map
});
var bird_icon = {
path: "m130.90909,164l54.09091,-23c0,0 -2.09091,-45 31.90909,-46c34,-1 37,6 42,23c5,17 -30,56 -30,71c0,15 23,21 56,40c33,19 56,62 64,81c8,19 14,39 21,46c7,7 16,16 15.09091,16c-0.90909,0 -14.09091,7 -15,7c-0.90909,0 -37.09091,-23 -46.09091,-23c-9,0 -35,-6 -57,-15c-22,-9 -35,-21 -35.90909,-21c-0.90909,0 0.90909,18 -0.09091,27c-1,9 -5,27 -5.90909,27c-0.90909,0 -7.09091,-15 -7.09091,-20c0,-5 5,-19 4.09091,-19c-0.90909,0 -3.09091,-16 -4,-16c-0.90909,0 -12.09091,0 -13,0c-0.90909,0 2.90909,10 0.90909,17c-2,7 2,31 1.09091,31c-0.90909,0 -17.09091,14 -18,14c-0.90909,0 8.90909,-20 8,-20c-0.90909,0 -1.09091,-15 -2.09091,-20c-1,-5 -5,-22 -5.90909,-22c-0.90909,0 -15.09091,-9 -29.09091,-50c-14,-41 37,-86 39,-93c2,-7 -8,-19 -8.90909,-19c-0.90909,0 -59.09091,7 -59.09091,7z",
fillColor: '#000000',
strokeColor: '#FFFFFF',
fillOpacity: 1,
strokeWeight: 1,
scale:.15
}
var bird_marker = new google.maps.Marker({
position: birdLoc,
map: map,
icon: bird_icon
});
</script>
</body>
</html>