CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
leccmo
leccmo

Reputation: 379

Google maps tilt view with default map type

I'm looking for Google Maps API to access the birdview that I can find in the navigation mode in Google Maps mobile app. (the one like top left here: http://www.igyaan.in/33685/google-maps-for-iphone-released-on-itunes/ )

I found there is "tilt" option to show 45 degree view in SATELLITE or HYBRID map type. https://developers.google.com/maps/documentation/javascript/maptypes?hl=en#45DegreeImagery

However is there any way to do this in default ROAD map type? Something like a navigation I mentioned the above? And hopefully anywhere in the world as long as there is a default map.

or can it be done by any other ways by using not just google maps api?

Thanks

Upvotes: 1

Views: 6682

Answers (2)

K K
K K

Reputation: 18099

As you said and also mentioned in the documentation about tilt :

Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 and 45. The value 0 causes the map to always use a 0° overhead view regardless of the zoom level and viewport. The value 45 causes the tilt angle to automatically switch to 45 whenever 45° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 45° imagery is not available (this is the default behavior). 45° imagery is only available for SATELLITE and HYBRID map types, within some locations, and at some zoom levels. Note: getTilt returns the current tilt angle, not the value specified by this option. Because getTilt and this option refer to different things, do not bind() the tilt property; doing so may yield unpredictable effects.

Reference: https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapTypeControlOptions

So, it's not possible with roadmap type. The closest you can get is to apply css transforms to the div and see if you can live with it.

CSS:

#map_canvas {
     height: 500px;
     width: 500px;
     -webkit-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
     -moz-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
     -o-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
     transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
 }
 .container {
     width:500px;
     height:500px;
 }

JS:

var map;
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(45.518970, -122.672899),
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

Demo: http://jsfiddle.net/lotusgodkk/x8dSP/3536/

This isn't a solution to what you need but closer to that.

Upvotes: 4

Coen Damen
Coen Damen

Reputation: 2109

Great answer! one improvement, I changed the CSS to use rotateX. Because otherwise the top lines are not straight (with rotate3d).

#map_canvas {
-webkit-transform: perspective(1500px) rotateX( 45deg )
    !important;
-moz-transform: perspective(1500px) rotateX( 45deg ) !important;
-o-transform: perspective(1500px) rotateX( 45deg ) !important;
transform: perspective(1500px) rotateX( 45deg ) !important;

}

Upvotes: 0

Related Questions