|
<!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&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> |
I've updated the sample because it fails due to
ol.source.GeoJSONremoval.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