CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
user2803146
user2803146

Reputation: 137

Centering google maps SymbolPath on LatLon

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);

Upvotes: 0

Views: 1446

Answers (1)

geocodezip
geocodezip

Reputation: 161374

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

Upvotes: 5

Related Questions