2015-12-04 18 views
5

Ho letto alcuni messaggi merito a questa questione con i link per examplesOpen Layers 3 ottiene baselayer di Google Maps?

Tuttavia faccio fatica a seguire come l'hanno fatto nell'esempio:

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: 'data/geojson/countries.geojson', 
    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); 

Quanti elementi DOM devo creare? È corretto?

<div id="map"> 
    <div id="gmap"></div> 
    <div id="olmap"></div> 
</div> 

Sto ricevendo un errore strutturando in questo modo. Ecco l'errore che ricevo:

Cannot read property 'parentNode' of null 

Eventuali indizi su come implementare Google Maps in OL3?

risposta