google-mapsopenlayersbing-maps

Can I integrate google map/api with openlayers?


I have openlayers integrated with bing map. I want to convert this current system with google map also instead of bing map. I have used bing map for journey planner, draw shapes, search locations, add annotation, add layers etc.

Can I do those above features with google map also?


Solution

  • The question has been asked before, but some of the answers have been unduly negative, mostly due to a very poor OpenLayers example.

    Unlike Bing Google does not allow its map tiles to be used directly in Openlayers, and you can't use OpenLayers code in the Google maps API so you would need to rewrite much of it.

    However, it is possible to use javascript to place an Openlayers map and controls on top of a Google map. OpenLayers produced a very poor example of how to do that with OpenLayers 3 and subsequently removed it. Here's a copy of that running in OpenLayers 4 http://bl.ocks.org/ThomasG77/21192c7045ab8f50e22e The two layers very obviously appear badly out of sync when the map is zoomed. However the experience can be significantly improved by temporarily hiding the overlying OpenLayers layer while the Google map catches up and/or minimising the OpenLayers zoom duration to reduce the catch up time. Plus minor issues like resetting the OpenLayers font size so it doesn't inherit the smaller size of the underlying Google map, and hiding or repositioning the two sets of attributions to avoid one obscurring the other also improve the experience. There was also a Google option to disable zoom animations, but that is no longer available.

    Here's a revised example running with those adjustments http://mikenunn.16mb.com/demo/ol5-google-demo.htm It uses a layer switcher so you can compare the effect when zooming the semi-transparent geology layer with a normal OpenLayers OSM layer and an underlying Google map. It's worth considering if you already have a lot of OpenLayers code which you may occasionally want use with a Google background.