Overlaying Raster image with Google Maps in OpenLayers3

Question

I am trying to overlay Google Maps with a raster image layer in Openlayers3 and am new to this. Can anyone help by providing the steps involved in performing this task?

Answer 1

There doesn't seem to be a Google Maps example on the OL Examples page yet, but there is a Bing Maps one if you want to start with that:

http://openlayers.org/en/master/examples/bing-maps.html The only difference is probably going to be changing the source section to be google specific.

source: new ol.source.BingMaps({ key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3', imagerySet: styles[i] // use maxZoom 19 to see stretched tiles instead of the BingMaps // "no photos at this zoom level" tiles // maxZoom: 19 })

You don't specify the nature of your raster. If it's a fixed one, try this example: http://openlayers.org/en/master/examples/static-image.html

More likely it'll be something you want served up via WMS, in which case: http://openlayers.org/en/master/examples/wms-image.html

Answer 2

1) the current google maps terms and license agreement is not friendly towards openlayers version 3. google prefers if you access their map tiles through their own google maps api so expect to get blocked if you release a live site that uses openlayers.

2) it is possible...see this link for an example proof of concept http://bl.ocks.org/elemoine/e82c7dd4b1d0ef45a9a4 (see update for my opinion on this) ...however they don't have an example for a raster but if you can add a basic layer if you wish. Depending on how big your raster is you may need to serve it with a mapping server. (mapserver, etc.)

bottom line: don't use google map tiles in a live openlayers site. Personally, I'm a little disappointed with google about this.

Update: after further inspection of the link above, it appears to be a hackish way of accomplishing the task. most likely, not what you're looking for. the code implements both openlayers3 and google maps side by side and is not just a nice custom map layer provider that I was expecting. I'll keep the link in my response but I thought I'd let you know that it's most likely NOT what you want.