Google Maps +ol2+draw
HTML
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/theme/default/style.css">
<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/style.css">
<div id="map" ></div>
<button id="draw_btn" >Draw</button>
CSS
#map{
width: 500px;
height: 320px;
}
JavaScript
var map;
function init() {
//Initializez harta cu 4 layere Google Earth
map = new OpenLayers.Map('map', {
projection: 'EPSG:3857',
layers: [
new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN}
),
new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 22}
),
new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
),
new OpenLayers.Layer.Google(
"Google Satellite",
{type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
)
],
center: new OpenLayers.LonLat(13.17, 55.70)
// Google.v3 uses web mercator as projection, so we have to
// transform our coordinates
.transform('EPSG:4326', 'EPSG:3857'),
zoom: 6,
scales: [5000, 10000, 25000, 30000, 50000],
units: 'm',
});
//click handler
document.getElementById("draw_btn").onclick = devDraw;
}
init();
function devDraw()
{
var x = new OpenLayers.Layer.Vector("one");
var p = new OpenLayers.Control.DrawFeature(x, OpenLayers.Handler.Polygon);
map.addLayer(x);
map.addControl(p);
p.activate();
}