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

您可以使用45 度想象来做到这一点，但它仅适用于特定位置。

Answer 2

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 3

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 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

Answer 5

Google Maps doesn't do that. It will always have to face North unfortunately.

I do seem to remember that OpenStreetMaps does spin around, I'm looking for something to confirm that suspicion. Will get back to you in a few.

Answer 6

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 .

Answer 7

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