|
<!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="https://openlayers.org/en/v4.6.5/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="https://openlayers.org/en/v4.6.5/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.Vector({ |
|
url: 'countries.json', |
|
format: new ol.format.GeoJSON() |
|
}), |
|
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> |