--- step-8/index.html 2023-07-02 13:20:09.119154723 +0000
+++ step-9/index.html 2023-07-02 13:20:09.119154723 +0000
@@ -1,8 +1,9 @@
<html>
<head>
- <title>Step 8: adding an alternative map layer</title>
+ <title>Step 9: Google map material</title>
<script src="../OpenLayers.js"></script>
<script src="../OpenStreetMap.js"></script>
+ <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css">
@@ -39,6 +40,8 @@
projLonLat = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
projMercator = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator
+ extentMax = 20037508.34;
+
overviewMap = new OpenLayers.Control.OverviewMap();
scale = new OpenLayers.Control.ScaleLine();
@@ -53,11 +56,18 @@
new OpenLayers.Control.Permalink(), // bookmarkable map links
scale, // scale ruler
overviewMap // overview map
- ]
+ ],
+ maxExtent: new OpenLayers.Bounds(-extentMax, -extentMax, extentMax, extentMax)
}
);
map.addLayer(new OpenLayers.Layer.OSM.Mapnik("Mapnik"));
map.addLayer(new OpenLayers.Layer.OSM.Osmarender("Osmarender"));
+ map.addLayer(new OpenLayers.Layer.Google("Google (Map)",
+ { 'type': google.maps.MapTypeId.ROADMAP, 'sphericalMercator': true } ));
+ map.addLayer(new OpenLayers.Layer.Google("Google (Hybrid)",
+ { 'type': google.maps.MapTypeId.HYBRID, 'sphericalMercator': true } ));
+ map.addLayer(new OpenLayers.Layer.Google("Google (Satellite)",
+ { 'type': google.maps.MapTypeId.SATELLITE, 'sphericalMercator': true } ));
map.setCenter(new OpenLayers.LonLat(lon, lat).transform(projLonLat,projMercator), zoom);
overviewMap.maximizeControl();
}