Google Maps is probably the most known web map application around the world. Their imageries, in the way of tiled layers, are well known by people; they are accustomed to their layer style and because of this you may be interested in using them in your own web mapping project.
OpenLayers counts with the OpenLayers.Layer.Google class, which is in fact a wrapper code around the Google Maps API, that allows us to use the Google Maps tiles in a homogeneous way within the OpenLayers API.
To use Google Maps imagery, perform the following steps:
- Create an HTML file and add the OpenLayers dependencies.
- Include the Google Maps API as follows:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
- Add a
divelement to hold the map, as follows:<!-- Map DOM element --> <div id="ch2_google" style="width: 100%; height: 100%;"></div>
- Within a
scriptelement, add the code to create the map instance and add a layer switcher control, as follows:<!-- The magic comes here --> <script type="text/javascript"> // Create the map using the specified DOM element var map = new OpenLayers.Map("ch2_google"); map.addControl(new OpenLayers.Control.LayerSwitcher()); - Create some Google based maps and add to the map, as follows:
var streets = new OpenLayers.Layer.Google("Google Streets", { numZoomLevels: 20 }); var physical = new OpenLayers.Layer.Google("Google Physical", { type: google.maps.MapTypeId.TERRAIN }); var hybrid = new OpenLayers.Layer.Google("Google Hybrid", { type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20 }); var satellite = new OpenLayers.Layer.Google("Google Satellite", { type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22 }); map.addLayers([physical, streets, hybrid, satellite]); - Finally, center the map on a desired location, as follows:
map.setCenter(new OpenLayers.LonLat(0, 0), 2); </script>
As you can see, the code has three main sections. First we have placed a div element, which will be used for the map, as follows:
<div id="ch2_google" style="width: 100%; height: 100%;"></div>
Next, we have included the Google Maps API code, as follows:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
Within a <script type="text/javascript"> </script> element, we have added the code necessary to initialize the map and add a layer switcher control, as follows:
var map = new OpenLayers.Map("ch2_google");
map.addControl(new OpenLayers.Control.LayerSwitcher()); Finally, we have added some well known Google Maps layers and centered the map's viewport, as follows:
var streets = new OpenLayers.Layer.Google("Google Streets", {
numZoomLevels: 20
});
var physical = new OpenLayers.Layer.Google("Google Physical", {
type: google.maps.MapTypeId.TERRAIN
});
var hybrid = new OpenLayers.Layer.Google("Google Hybrid", {
type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20
});
var satellite = new OpenLayers.Layer.Google("Google Satellite", {
type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22
});
map.addLayers([physical, streets, hybrid, satellite]);
map.setCenter(new OpenLayers.LonLat(0, 0), 2); The type of the layers are defined by the Google Maps API class google.maps.MapTypeId, which you can find at http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeId.
Note
Note that we are working with two APIs, OpenLayers and Google Maps API, so it would be good to take a look at the Google Maps API to better understand its capabilities.
Documentation can be found at https://developers.google.com/maps/documentation/javascript/tutorial.
In this recipe, we have shown you how to use the Google Maps API Version 3 to add the Google imagery to your OpenLayers projects.
For the previous version 2, Google requires you to register as a user and obtain an API key that you need to use to initialize the OpenLayers.Layer.Google instance. The key is later used on every tile request to identify you, so Google can know about your usage.
As you have seen, version 3 is much more simple to use within OpenLayers.
- The Adding WMS layer recipe
- The Using Bing imagery recipe
- The Understanding base and non-base layers recipe in Chapter 1, Web Mapping Basics