Skip to content

Instantly share code, notes, and snippets.

/gist:90061cd545efc4e27acc

Created February 20, 2015 11:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/90061cd545efc4e27acc to your computer and use it in GitHub Desktop.
Save anonymous/90061cd545efc4e27acc to your computer and use it in GitHub Desktop.
Download ZIP
Google maps api in openlayers at 90 25
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Google (v3) Layer Example</title>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/style.css" type="text/css">
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script>
<script>
var map;
function init() {
map = new OpenLayers.Map('map', {
projection: 'EPSG:3857',
layers: [
new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
)
,new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
),
new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
),
new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
)
],
center: new OpenLayers.LonLat(-90, 25)
// Google.v3 uses web mercator as projection, so we have to
// transform our coordinates
.transform('EPSG:4326', 'EPSG:3857'),
zoom: 4
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
// map.setCenter(new OpenLayers.LonLat(-90.5, 25).transform('EPSG:4326', 'EPSG:3857'),4);
// add behavior to html
var animate = document.getElementById("animate");
animate.onclick = function() {
for (var i=map.layers.length-1; i>=0; --i) {
map.layers[i].animationEnabled = this.checked;
}
};
}
</script>
</head>
<body onload="init()">
<h1 id="title">Google (v3) Layer Example</h1>
<div id="tags">
Google, api key, apikey, light
</div>
<p id="shortdesc">
Demonstrate use the Google Maps v3 API.
</p>
<div id="map" class="smallmap" style="width: 640px;height: 480px;border: 1px solid #000;"></div>
<div id="docs">
<p><input id="animate" type="checkbox" checked="checked">Animated
zoom (if supported by GMaps on your device)</input></p>
<p>
If you use the Google Maps v3 API with a Google layer, you don't
need to include an API key. This layer only works in the
spherical mercator projection. See the
<a href="google-v3.js" target="_blank">google-v3.js source</a>
to see how this is done.
</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment