Is there a way to get the google.maps.SymbolPath.FORWARD_CLOSED_ARROW to put the center of the icon at the LatLng position. It seems to be putting the point of the arrow there.
I have tried to experiment with the anchor but to no avail.
Here is my example code:
var marker=new google.maps.Marker({ position: new google.maps.LatLng(50.124462, -5.539994), icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, scale: 8, strokeWeight: 2, fillColor: '#009933', fillOpacity: 1, rotation: 210, anchor: new google.maps.Point(0, 0) }, }); marker.setMap(map);
For that symbol, use an anchor of (0,2.6)
fiddle demonstrating that at various rotations
Simplest way to find experimentally is remove the rotation, then play with the anchor to see where it goes.
var marker = new google.maps.Marker({ position: new google.maps.LatLng(50.124462, -5.539994), icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, scale: 8, strokeWeight: 2, fillColor: '#009933', fillOpacity: 1, rotation: 210, anchor: new google.maps.Point(0,2.6) }, });
working fiddle
working code snippet:
var map; function init() { var startLatLng = new google.maps.LatLng(50.124462, -5.539994); map = new google.maps.Map(document.getElementById('map-canvas'), { center: startLatLng, zoom: 12 }); var marker = new google.maps.Marker({ position: new google.maps.LatLng(50.124462, -5.539994), map: map }); var marker = new google.maps.Marker({ position: new google.maps.LatLng(50.124462, -5.539994), icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, scale: 8, strokeWeight: 2, fillColor: '#009933', fillOpacity: 1, rotation: 210, anchor: new google.maps.Point(0, 2.6) }, }); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', init);
html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas" style="border: 2px solid #3872ac;"></div>
