Building a webmapping application using the OpenLayers 3 JavaScript library is a breeze. Its features are numerous, rich and extremely versatile. In terms of quality and performance, it surpasses by far its predecessor OpenLayers 2.

Despite all its advantages, there is one important feature that it doesn’t support that even its predecessor did: Google Maps API layers support. Until now, the suggested solutions that allowed both of them to work together were not officially supported, nor even recommended.

Say hello to OL3-Google-Maps!

OL3-Google-Maps is an Open Source library introduced by Mapgears that allows Google Maps layers to be added inside an OpenLayers map. Its objectives are:

  • make the addition of Google Maps layers within OpenLayers easy and transparent
  • ensure that what’s on the map is synchronized while navigation animations are in progress
  • no Google Maps API knowledge required

The library is still young. Version 0.2 was just released yesterday. Among its features:

  • vector layer and features support
  • vector styling support, which are transformed into native Google Maps styling
  • view synchronization between OpenLayers and Google Maps


You can see the library in action through some examples online.

Under the hood

If you’re a bit geek like us, you’ll be interested in knowing how the library works.

As soon as a Google layer is added in the OpenLayers map, the library is activated and creates a Google Maps map which gets inserted below the OpenLayers one. The vector features rendered in the OpenLayers map become invisible, while they’re also being added to the Google Maps map. Each feature is synchronized with its counterpart. Modifying one that comes from OpenLayers updates the one from Google Maps. This allows programming the application using only the OpenLayers API.


Special thanks

We want to thank Brandify for funding the initial development of the library leading to the current 0.2 release. Established in 1997, Brandify (formerly known as Where2GetIt) is an industry-leading provider of location-based digital marketing solutions that provides brands with a better understanding of their connection to their customers.