In usability we trust

UX and all things web

45° imagery view in Google Maps

In the latest version of Google Maps API 3 (version 3.4) a new exciting feature is introduced: 45° imagery in selected cities around the world. This feature will let you see the world from a whole new angle. This change also calls for new properties and controls for the Map Object which will all be explained in this article. As a bonus I will also introduce you to another new feature, the brand new Map Overview Control.

New imagery

To enable this new view there’s one new property in the MapOptions object that you need to be aware of, it’s called tilt. It works in cooperation with the Map types SATELLITE and HYBRID. So unless you set the map to use one of these, the map won’t work. Here’s how tilt work:

  • tilt
    Enables the 45° imagery view and takes a number as its value. This value must be set to 45. Note that the mapTypeId property must be set to either SATELLITE or HYBRID for this property to work.

This particular view is only available from zoom level 18. It can be enabled by the user with a drop-down option in the Map Type control. Try hovering the Satellite button in the example below to display the option to switch 45° view on and off. If you ascend over zoom level 18 you will notice that this option is grayed out and regular satellite imagery is displayed.

To create the map displayed in the example below this code is used. It opens up a map centered over Stuttgart Schlossplatz at zoom level 18, with tilt enabled:

var options = {
  zoom: 18,
  center: new google.maps.LatLng(48.7783, 9.1807),
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  tilt: 45
}; 
var map = new google.maps.Map(document.getElementById('map'), options);


See example in full size

Rotate Controls

With this new functionality new controls are needed. When the large navigation controls are displayed an additional circle is displayed around the pan control. It’s the same that’s available in street view. You can drag it around to see imagery from different angles.

The new Rotate Controls

Additionally there’s a smaller rotate control positioned right above the zoom control. It rotates the imagery 45 degrees clockwise each time it’s clicked. This control is available in both regular and compact view.

Only the small rotate control is available in compact view

Current coverage

Only selected cities are available at this time but new ones are continuously being added. To see the cities that are currently available, check out this map.

Overview Map

Another new feature in API v3 is something that’s been available in v2 for a long time, an Overview Map. It’s a small fold out map in the lower right corner of the main map that provides an overview of the area you’re currently watching. To enable it there are two new properties in the MapOptions object:

  • overviewMapControl
    Enables the overview map and can be either true or false. The default value is currently false which means that it’s not visible. (See note below)
  • overviewMapControlOptions
    Takes an object literal as its value which has one possible property: opened. Set this to either true or false depending on if you want the map to be folded out when the map loads or not. The default value is false.

Note: In a few weeks from now (March 17, 2011) the default value of overviewMapControl will be changed from false to true. This means that you need to explicitly set it to false unless you want your maps to be enabled with an overview map.

Below is an example map which has an enabled overview map that opens when the main map loads. The map is centered over Heroes’ Square in Budapest at zoom level 19. Here’s what the code looks like:

var options = {
  zoom: 18,
  center: new google.maps.LatLng(47.5153, 19.0782),
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  tilt: 45,
  overviewMapControl: true,
  overviewMapControlOptions: {
    opened: true
  }
}; 
var map = new google.maps.Map(document.getElementById('map'), options);


See example in full size

More information

For more information check out A new angle on the world with 45° imagery on the Geo Developers Blog.

For a complete list of all new features and fixes in the 3.4 release, check out the changelog.

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

3 Comments

  1. Hi Gabriel

    I’ve bought your book recently. It’s so nice to computer bookm which you can actually read.
    I’ve only discovered google maps. An aladin’s treasure trove and I am using it to display truck journeys between the UK and mainland europe with alternative short sea shipping routes.

    I’ve been puzzling for weeks on how to display two separate routes on in the UK and one on mainland europe with a sea route i between. Eventually I found out how to do it, and thanks to your book draw a polyline for the sea route.

    But now I find that although I set up the map with one zoom level (=5), by the time I have displayed a route in the Uk and one in spain and a sea route in between, the zoom level has mover to 7.
    I’ve tried to bring it back via the map.setZoom command, but it just ignores it.

    I’m at a bit of a loss what to do. Any ideas?
    See truckroute

    Thanks

    John

  2. John: Nice map! and thanks a lot for the kind words about my book.

    I think the problem you’re having might have something to do with that the DirectionsRenderer automatically adjusts the viewport of the map to fit the route. Try setting the preserveViewport property of the DirectionsRendererOptions object to true. That should override this default behavior.

    It’s described in the API Reference:

  3. ernest stephen arnold

    May 30, 2011 at 4:25 pm

    how do i type in the place i want to look at as one could when you made a web search for google eartn?

Leave a Reply

Your email address will not be published.

*