Menu
I have created two markers on a map, one a standard marker, the other using an SVG path. The standard marker does not move relative to the map when I zoom out, but the SVG marker does. Here is a fiddle where you can see what I mean:
http://jsfiddle.net/9A4ET/
Any thoughts on how to get the SVG marker to hold its place relative to the map?
<!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>
821
initialize() function creates a google Map with location Marker. transition() & moveMarker() are used to move location marker smoothly on Google Map.
To fix Google maps zooming problems, for Google maps default zoom you want to know how to change the zoom level on Google Maps. You can change the zoom level by going to the Edit map page and then selecting 'default zoom level' in the map information section and then clicking save map.
You must define the anchor for the symbol(for a symbol the default is the top left corner, while default for a image is the bottom center)
For this specific symbol the Point for a bottom center anchor would be approximately 258,381
Demo: http://jsfiddle.net/a3LKP/5/
Explanation of the calculation of the origin at bottom center(for inkscape).
Let's assume you didn't create the path(symbol) on your own, create a SVG-document with the given path:
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0">
<g>
<path d="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"/>
</g>
</svg>
Open this document with inkscape.
First go to File->document-properties->page to determine the document-height(for me it's 1052.36px , I guess that's the default)
Then click on the symbol to select it, in the menubar you should see the properties of the object: X , Y , W(idth), (H)eight.
For me it's now:
document-height: 1052.36
object-x: 130.909
object-y: 671.362
object-width: 254.155
object-height: 286.093
calculating the y of the bottom :
substract the object-y from the document-height(1052-671=381)
calculating the x of the center :
add the half of the objects width to the objects x(131+(254/2)=258)
So the anchor is new google.maps.Point(258,381)
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
