how to rotate map orientation with google maps api v3

Question

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

Answer 1

You can do that with 45 degree imaginery but it only works for specific locations.

Answer 2

As a workaround, you can rotate its wrapper div instead, using CSS transform: rotate()

*you need to disableDefaultUI, because every element inside will be rotated as well

Answer 3

OpenLayers is a free, lightweight and very complete javascript mapping API. Just take a look at their example page, it looks awesome (rotation example: https://openlayers.org/en/latest/examples/rotation.html).

OpenLayers can be made to show Google Maps tiles too, which can then be rotated https://gis.stackexchange.com/a/277606/114599

Answer 4

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