Skip to content

Instantly share code, notes, and snippets.

@elemoine
Last active January 5, 2018 06:52
Show Gist options
  • Save elemoine/e82c7dd4b1d0ef45a9a4 to your computer and use it in GitHub Desktop.
Save elemoine/e82c7dd4b1d0ef45a9a4 to your computer and use it in GitHub Desktop.
OpenLayers 3 Google Maps API

Use OL3 and Google Maps together

This GIST provides an example of a Google Maps map with an OL3 map as control, to give users a Google base map with OL3 content on top.

Open the corresponding bl.ock to view the example in your browser.

Warning!

This integration between Google Maps and OL3 is rough. Do not use it in production!

Why doesn't OL3 include a Google Maps source?

This question very often comes up on the OL3 mailing list. The short answer is because Google doesn't allow us to directly access their tiles. See Paul Spencer's post on the OL3 mailing list for a more complete explanation.

Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css" type="text/css">
<style type="text/css">
body {
width: 960px;
height: 500px;
position: relative;
}
#map {
width: 100%;
height: 100%;
}
div.fill {
width: 100%;
height: 100%;
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<title>Google Maps integration example</title>
</head>
<body>
<div id="map" class="map">
<div id="gmap" class="fill"></div>
<div id="olmap" class="fill"></div>
</div>
<script src="http://openlayers.org/en/master/build/ol.js" type="text/javascript"></script>
<script type="text/javascript">
var gmap = new google.maps.Map(document.getElementById('gmap'), {
disableDefaultUI: true,
keyboardShortcuts: false,
draggable: false,
disableDoubleClickZoom: true,
scrollwheel: false,
streetViewControl: false
});
var view = new ol.View({
// make sure the view doesn't go beyond the 22 zoom levels of Google Maps
maxZoom: 21
});
view.on('change:center', function() {
var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
});
view.on('change:resolution', function() {
gmap.setZoom(view.getZoom());
});
var vector = new ol.layer.Vector({
source: new ol.source.GeoJSON({
url: 'countries.json',
projection: 'EPSG:3857'
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
})
})
});
var olMapDiv = document.getElementById('olmap');
var map = new ol.Map({
layers: [vector],
interactions: ol.interaction.defaults({
altShiftDragRotate: false,
dragPan: false,
rotate: false
}).extend([new ol.interaction.DragPan({kinetic: null})]),
target: olMapDiv,
view: view
});
view.setCenter([0, 0]);
view.setZoom(1);
olMapDiv.parentNode.removeChild(olMapDiv);
gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);
</script>
</body>
</html>
@zhulinpinyu
Copy link

Thank you so much from Shenzhen 👍

@ThomasG77
Copy link

I've updated the sample because it fails due to ol.source.GeoJSON removal.
You may want to correct this sample as your GIST seems to be one of the main entry for using Google Maps with OpenLayers 3
https://gist.github.com/ThomasG77/21192c7045ab8f50e22e

@prieston
Copy link

Why "don't use it in production "? could it be not supported in the future??

@luckylooke
Copy link

Cannot reach Paul Spencer's post :/ url doesnt work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment