Do Open Layers 3 get basic Google Maps settings?

Question

I read a few posts on this subject with links to examples

However, it’s hard for me to understand how they did this in this example:

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); 

How many DOM elements should I create? Is it correct?

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

I get an error by structuring like this. Here is the error I get:

 Cannot read property 'parentNode' of null 

Any tips on how to implement Google Maps in OL3?

Answer 1

This attempt was deprecated, it is better to look at: https://github.com/mapgears/ol3-google-maps