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.

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.

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.