Reputation: 123
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>
Upvotes: 1
Views: 362
Reputation: 161404
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
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>
Upvotes: 1