how to rotate map orientation with google maps api v3

user_1051849 0
Viewed 25056

Very short question - as i can't find an answer in the google maps api V3 documentation

I'm looking for a control which allows me to control/modify an api map's orientation so that north isn't at the top.

Is this possible? If so, how?

Thanks

google-maps-api-3 jquery javascript
7 Answers

Currently, Google-Maps-API doesn't have an option to rotate the map (I'm hoping this feature will be soon).

The only way you can rotate a map is if:

  1. mapTypeId is satellite or hybrid
  2. Map zoom set to high value (around 18 or more)
  3. Map tilt is enabled by setting tilt: 45. This parameter will change the map display from a 2D map view into a 3D-like view by tilting the map in 45 degrees.
  4. heading parameter is set to the rotation you would like to have (0, 90, 180 and 270 degrees). This will only work if tilt is enabled.
  5. The visible area on the map is a place that supports map tilt operation (these locations have 4 different satellite images for 4 directions (North, South, East, and West). Not all places on the map have these 4 images therefore not all places on the map can be rotated.


    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 45.518, lng: -122.672 }, // try to put different location and rotation may not work
        zoom: 18, // use a smaller zoom level and rotation may not work
        mapTypeId: 'satellite', // use TERRAIN or ROADMAP and rotation will not work
        heading: 90,
        tilt: 45
      });
    }

for more info see: https://developers.google.com/maps/documentation/javascript/examples/aerial-rotation

user_26586830

In the Beta version of Google Map Javascript API, both tilt and heading (as for orientation) are supported, if you use the new vector map format.

  • first create a new MapId
  • Use v=beta in your API script tag 
    <script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=beta&callback=initMap">
</script>
  • include the heading and tilt properties when initializing the map, also with the MapId
  • remember to enable Use hardware acceleration when available in settings if using Chrome

full instructions can be found here.

user_62087830

Google Maps (the public web version) can indeed do this just like Google Earth can, at any location. Just by using CTRL+Click. But the API version doesn't support that functionality.

See screenshot: https://ibb.co/VBn6Cjv

user_150333160
Related