SVG Icon point in the direction of another marker

Question

I'm making a Google Maps application which has a video camera icon representing the street view and another icon representing any position.

See the Fiddle:

http://jsfiddle.net/uepc2f8n/52/

If I uncomment this "//google.maps.SymbolPath.FORWARD_CLOSED_ARROW", works fine! But when I put the camera path, the position does not get in the right position.

I don't know much about SVG Path, it's complex!

How do I point the lens of the camera in the direction of my marker?

code snippet (from linked fiddle):

function initialize() {
  var direction = new google.maps.LatLng(52.376423, 4.887234);
  var station = new google.maps.LatLng(52.155401, 5.118824);

  var mapProperties = {
    center: direction,
    zoom: 10
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapProperties);

  var directionMarker = new google.maps.Marker({
    position: direction,
    map: map,
    draggable: true,
    title: "test"
  });

  var heading = google.maps.geometry.spherical.computeHeading(direction, station);

  directionMarker.setIcon({
    path: "M17 -5.5V-15c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z", //google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
    scale: 2,
    rotation: heading
  });

  var stationMarker = new google.maps.Marker({
    position: station,
    map: map,
  });

  var polyline = new google.maps.Polyline({
    path: [direction, station],
    geodesic: true,
    strokeColor: "#ff0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  polyline.setMap(map);
}

initialize();

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
<div id="map-canvas"></div>

Answer 1

You need to set the anchor and the rotation of the SVG Symbol correctly for your particular symbol. Looks to me like you want an anchor of (3,-10) and a rotation of heading - 90 degrees.

anchor: new google.maps.Point(3, -10),
rotation: heading - 90

updated fiddle

code snippet:

function initialize() {
  var direction = new google.maps.LatLng(52.376423, 4.887234);
  var station = new google.maps.LatLng(52.155401, 5.118824);

  var mapProperties = {
    center: direction,
    zoom: 10
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapProperties);

  var directionMarker = new google.maps.Marker({
    position: direction,
    map: map,
    draggable: true,
    title: "test"
  });

  var heading = google.maps.geometry.spherical.computeHeading(direction, station);

  directionMarker.setIcon({
    path: "M17 -5.5V-15c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z",
    scale: 2,
    anchor: new google.maps.Point(3, -10),
    rotation: heading - 90
  });
  var stationMarker = new google.maps.Marker({
    position: station,
    map: map,
  });
  var polyline = new google.maps.Polyline({
    path: [direction, station],
    geodesic: true,
    strokeColor: "#ff0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  polyline.setMap(map);
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(station);
  bounds.extend(direction);
  map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas"></div>