Problem trying to rotate a map with Google Maps API
Question
I have written an HTML that, using Google Maps API, shows the aircraf's landing point when I land in Flight Simulator.
What I would achieve is to rotate the map considering the aircraft's course.
The below HTML initially seems to run fine, but in one second the map go back to northern orientation.
How could I solve the issue? What I'm doing wrong.
Thanks and kind regards
Joe
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&sensor=true&libraries=weather">
</script>
<script type="text/javascript">
google.maps.visualRefresh = true;
function initialize() {
var image = {
url: "pubicons3/89.png", // url
scaledSize: new google.maps.Size(80, 80), // scaled size
// origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(40, 40) // anchor
};
var myctr = new google.maps.LatLng(45.8278829742545,13.4600065786118);
var mapOptions = {
zoom:18,
disableDefaultUI: true,
mapTypeControl: false,
scaleControl: true,
center: myctr,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading:89,
tilt:15
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var airloc = {lat:45.8278829742545, lng:13.4600065786118};
var marker = new google.maps.Marker({
position:airloc,
map:map,
icon:image,
ZIndex:4
});
// flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
1 answers
solution1
0 2021-12-13 04:47:06
You can use the Maps JavaScript API WebGL Features' Tilt and Rotation where you can set tilt and rotation (heading) on the vector map by including the heading and tilt properties when initializing the map, and by calling the setTilt and setHeading methods on the map. Note that n order to use the new WebGL features, you need a map ID that uses the vector map. You'll also need to update your API bootstrap request. Please see this .
Here's a sample code that shows what you want to achieve and code snippets below:
function initMap() {
var airloc = {
lat: 45.8278829742545,
lng: 13.4600065786118
};
const map = new google.maps.Map(document.getElementById("map"), {
center: airloc,
zoom: 16,
heading: 89,
tilt: 15,
mapId: "90f87356969d889c",
mapTypeId: 'satellite',
});
var image = {
url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", // url
scaledSize: new google.maps.Size(80, 80), // scaled size
// origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(40, 40) // anchor
};
var marker = new google.maps.Marker({
position: airloc,
map: map,
icon: image,
ZIndex: 4
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.