I have a OpenStreetMap for base layer in my website. How can I adding GoogleMaps to base layer, I already have the license API Key.

My base layer OSM:

        var map = new ol.Map({
            view: mapView,
            layers: [
                new ol.layer.Tile({
                     source: new ol.source.OSM({
                         attributions: [
                             ' © Powerby: <a href="https://xx.xxx.vxx/" target="_blank">Me</a>',
            target: 'map',
            title: 'Base Layer',

1 Answer 1


If you do not have access to the tile API you can overlay a Google map with an OpenLayers map (in the same way as the Mapbox map in https://openlayers.org/en/latest/examples/mapbox-layer.html).

There was an example in OpenLayers 3, but only this copy remains http://bl.ocks.org/ThomasG77/21192c7045ab8f50e22e The maps do not sync well in that now as Google's setZoom method animates, so you must use the new moveCamera method instead.

Here is the old example updated to the latest OpenLayers https://jsfiddle.net/vharb97t/1/ (edited from the latest tutorials https://developers.google.com/maps/documentation/javascript/tutorials)

  • I have full permissions for API key. I will try your examples, thanks a lot.
    – Jayzz
    Oct 25, 2022 at 2:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.