Time For Action – creating your first mashup
Let's make a map 'mashup' that consists of a Google Map layer, a WMS layer, and a Vector layer.
First, we need to add the Google Maps V3 script API tag in the
<head>
section:<script src="http://maps.google.com/maps/api/js?sensor=false&v=3.2"></script>
Now, set up your map object with the proper projection info, like in the previous example:
map = new OpenLayers.Map('map_element',{ maxExtent: new OpenLayers.Bounds( -128 * 156543.0339, -128 * 156543.0339, 128 * 156543.0339, 128 * 156543.0339), maxResolution: 156543.0339, units: 'm', projection: new OpenLayers.Projection('EPSG:900913'), displayProjection: new OpenLayers.Projection("EPSG:4326"), });
Now let's create a Google Maps layer. Because we are using V3 of the API, we do not need to specify
sphericalMercator: true
because it is set totrue
automatically.var google_streets = new OpenLayers.Layer.Google( "Google Streets", {numZoomLevels: 20} );
We'll create...