OpenLayers Blog

All the maps that are fit to blog

Google Maps V3 for OpenLayers

July 10th, 2010 by ahocevar · 79 Comments

As of today, the OpenLayers development version supports Google layers served by the Google Maps V3 API. This is not only Google’s latest and greatest Maps API, it also makes life easier on the OpenLayers side because no API key is required. To use the new Google layer, application developers just have to include this script tag on their html page:

<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>

When creating OpenLayers.Layer.Google instances, the only difference to the V2 API is the way the layer types are configured:

var gphy = new OpenLayers.Layer.Google(
    "Google Physical",
    {type: google.maps.MapTypeId.TERRAIN}
    // used to be {type: G_PHYSICAL_MAP}
);
var gmap = new OpenLayers.Layer.Google(
    "Google Streets", // the default
    {numZoomLevels: 20}
    // default type, no change needed here
);
var ghyb = new OpenLayers.Layer.Google(
    "Google Hybrid",
    {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
    // used to be {type: G_HYBRID_MAP, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
    "Google Satellite",
    {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
    // used to be {type: G_SATELLITE_MAP, numZoomLevels: 22}
);

Work on the V3 API support for OpenLayers started in February during the NYC Sprint hosted by OpenGeo. At that time, the v3 API did not allow us to pan the map without a built-in smooth animation, resulting in ugly dragging behavior with overlay layers. After this issue was starred by many OpenLayers users, Google finally changed the API’s setCenter method to not do a pan animation any more.

Now that Google has also deprecated the V2 API, it was about time to give OpenLayers users a new Google layer for the future. Speaking of future, OpenLayers.Layer.Google.v3 comes pre-configured with a working Spherical Mercator setup, like OpenLayers.Layer.OSM. This means that the new layer type can be used without configuring map options like projection, maxExtent, units or maxResolution. Developers only need to transform coordinates to the EPSG:900913 projection when setting center or extent of the map.

The recommended entry point for getting started with OpenLayers.Layer.Google using the V3 API is the new google-v3.html example, which should make clear how to migrate existing applications.

For existing applications that continue to use V2, the only caveat is that due to separating V2 and V3 specific code out from the OpenLayers.Layer.Google class into a mixin, OpenLayers.Layer.Google.prototype calls may need to be modified. This is explained in the release notes for the next release, which will ship with the new Google V3 layer.

Tags: Features · Future

79 responses so far ↓

  • 1 Santiago Higuera // Jul 10, 2010 at 1:32 pm

    I check the example and i see that it is ok with the openlayers.org/dev/openlayers.js but it goes wrong with the openlayers.org/api/openlayers.js

    why?

    Fdo.: Santiago Higuera

  • 2 ahocevar // Jul 10, 2010 at 4:16 pm

    Hey Santiago, the new Google V3 layer is newer than our latest 2.9.1 release. It will ship with the next release, and for now it is only available in the nightly builds and the dev version.

  • 3 Dimitri Gielis // Jul 11, 2010 at 2:29 pm

    I’m getting an error: G_NORMAL_MAP is not defined
    [Break on this error] OpenLayers.Event.stop(evt);},clearFeat…(!this.type){this.type=G_NORMAL_MAP;}
    OpenLayers.js (line 1390)

    Do you have an idea what I can check, or is this a development error in OpenLayers.js?

    Thanks,
    Dimitri

  • 4 Santiago Higuera // Jul 11, 2010 at 2:35 pm

    You have to use the API in the openlayers.org/dev/openlayers.js.

    Fdo.: Santiago Higuera

  • 5 Dimitri Gielis // Jul 11, 2010 at 2:38 pm

    Hello Santiago, I think I did as I used this one: http://dev.openlayers.org/nightly/OpenLayers.js

  • 6 Santiago Higuera // Jul 11, 2010 at 2:50 pm

    I have checked with ‘normal’ version and with ‘nightly’ and it goes wrong.
    You have to put:

    and all it’s fine!

    Fdo.: Santiago Higuera

  • 7 Santiago Higuera // Jul 11, 2010 at 2:51 pm

    I have checked with ‘normal’ version and with ‘nightly’ and it goes wrong.
    You have to put:

    src=”http://www.openlayers.org/dev/OpenLayers.js”

    and all it’s fine!

    Fdo.: Santiago Higuera

  • 8 Dimitri Gielis // Jul 12, 2010 at 2:05 am

    Yep that worked.

  • 9 crb // Sep 5, 2010 at 11:12 pm

    Will the OpenLayers.js at http://www.openlayers.org/dev/OpenLayers.js be released as a formal OL release? It’s not as of 2.9.1. In which release will the v3 GMaps API work?

  • 10 ahocevar // Sep 6, 2010 at 4:06 am

    It will be in the 2.10 release, which is already in release candidate state and should be out this week.

  • 11 Mylz // Oct 8, 2010 at 11:30 am

    Is there anyway to get rid of the streetview icon when using a v3 google map layer? Its sittin on top of my navigation controls and i’d like to remove it properly before I resort to DOM manipulation

  • 12 ahocevar // Oct 8, 2010 at 11:45 am

    I wish GMaps v3 could be pegged to a specific API version, like v2 did. This streetview icon is new. @Mylz: can you please create a bug ticket in the OpenLayers issue tracker?

  • 13 ahocevar // Oct 8, 2010 at 12:03 pm

    Already ticketed: http://trac.osgeo.org/openlayers/ticket/2868

  • 14 Jason // Oct 15, 2010 at 8:51 am

    I was trying to get the new custom Styled Maps that Google maps v3 now offers in OpenLayers. Is this possible?

  • 15 bfbd // Oct 23, 2010 at 10:09 am

    I try to use event of ‘loadend’ on google layer,it doesn’t work.

    code like this:

    layer.events.register(“loadend”, layer, function() {alert();});

  • 16 ahocevar // Oct 23, 2010 at 12:05 pm

    @Jason: you could directly access the GMap object to achieve this: layer.mapObject.

    @bfbd: “loadend” is not implemented for Google layers (both v2 and v3).

  • 17 bfbd // Oct 24, 2010 at 9:58 pm

    thanks very much.

  • 18 EdgarAlejandro // Nov 29, 2010 at 7:41 pm

    How can i control the zoom and LonLat?
    i’ve this, but does not work: http://pastebin.com/sXxQ9zUt

  • 19 EdgarAlejandro // Nov 29, 2010 at 7:42 pm

    i’m working with geodjango

  • 20 ahocevar // Nov 30, 2010 at 6:19 am

    @EdgarAlejandro: your code looks right to me. You will get better answers on the OpenLayers users list (http://lists.osgeo.org/mailman/listinfo/openlayers-users).

  • 21 Yves Moisan // Nov 30, 2010 at 12:11 pm

    Hi Andreas,

    Provided I use trunk (or the most recently tagged version) of OpenLayers, just changing the type (e.g. ‘type: google.maps.MapTypeId.TERRAIN’) automatically calls in v3.js ?

  • 22 EdgarAlejandro // Nov 30, 2010 at 10:36 pm

    @ahocevar thank you very much, I’ll keep trying in OpenLayers users list

  • 23 ahocevar // Dec 1, 2010 at 4:03 am

    @Yves_Moisan: as explained in this post, the script url you have to include for v3 is different than for v2. So if you want to migrate an existing app, you have to change the script url and your layer types.

  • 24 Yves Moisan // Dec 1, 2010 at 9:24 am

    @Ahocevar: right thank you. If I have a customer who has paid for a Google premier licence, I guess I stick the apikey value in that url as a parameter ?

  • 25 ahocevar // Dec 1, 2010 at 10:30 am

    @Yves_Moisan: I’m sure Google support can answer this question.

  • 26 Yves Moisan // Dec 1, 2010 at 10:57 am

    @Ahocevar; right; I thought the url was something specific to OL; sorry for the noise

  • 27 Yves Moisan // Dec 3, 2010 at 9:27 am

    @self : “To load the Google Maps JavaScript API Version 3 using your Google Maps API Premier client ID, append an additional client parameter onto the URL used to retrieve the JavaScript library”

    (http://code.google.com/apis/maps/documentation/premier/guide.html#ClientID)

    Note that there is also a “v=3″ url parameter in that case.

  • 28 EdgarAlejandro // Dec 10, 2010 at 3:47 am

    how can i Display Popups?

  • 29 jason // Dec 17, 2010 at 6:13 am

    hello everyone ! I have a question. that is , I used OpenLayers to show googleMaps , the map was showed, at the same time , a dialog popup, each click or move , the dialog is show, This problem bothering me for a long time, fi anyone know, notice me, Thanks!

  • 30 jason // Dec 17, 2010 at 6:17 am

    oh , the content of dialog is map data @2010 Basarsoft, Geocentre Consulting, Google, LeadDog Consulting, Mapa GISrael, Mapabc, ORION-ME,PPWK, Tele Atlas, Tran etc.

  • 31 Vladimir // Dec 17, 2010 at 6:58 pm

    OpenLayers with Google maps API v3 has (as of today) starting showing a popup containing Data and imagery credits. The popup appears when the map is loaded and contains a close button. Once closed the popup apears again every time the map is clicked / panned / zoomed.

    I can only assume that this is a bug. Maybe some sort of new About dialog which is malfunctioning.

    Not sure if the malfunction is down to open layers or Google API.

    Any ideas anyone?

  • 32 ahocevar // Dec 18, 2010 at 9:04 am

    To work around the popup issue, use a different script resource to include the GMaps API:

    http://maps.google.com/maps/api/js?v=3.2&sensor=false

    Note the v=3.2, which forces the 3.2 API to be used. v=3 would always load the latest API.

  • 33 jason // Dec 19, 2010 at 9:42 pm

    oh, my god, it’s wonderfull. user the ahoceval’s key can do! Thank you very much! you are unique!

  • 34 karthi // Dec 20, 2010 at 2:57 am

    thanks.

  • 35 Kurt // Dec 22, 2010 at 7:13 am

    @ahocevar thanks for your tip, it really works…

    Not to spoil the fun but i assume it only works because in version 3.2 there wasn’t the check right ? I mean in order to work we need to keep using v3.2 forever ?

    Or is there anyone who knows if this is something intended or just some mulfuntionality ??

  • 36 Martin // Dec 28, 2010 at 6:41 am

    @ahocevar

    I’ve tried changing that, i.e. 3 to 3.2, but I still get this popup, at least using Mac/Safari and Mac/Chrome. Any further ideas?

  • 37 jason // Dec 30, 2010 at 3:01 am

    I use OpenLayers on the map shows googleMap + geoserver data, I want to add marks on the map, but always failure, but I only use geoserver data ,that can be successful, don’t know what reason be?

  • 38 Bernhard // Jan 24, 2011 at 7:24 am

    For those who have problems with the Popup and don’t want to use version 3.2. You can hide it by changing the stylesheet theme/default/style.css in your OpenLayers distribution. Within this styleheet you will find .olLayerGoogleCopyright. Just add visibility: hidden and you’re done.

  • 39 Vladimir // Feb 28, 2011 at 7:12 am

    OpenLayers with Google Maps V3 ha changed its panning behavior as of yesterday.

    In my case dragging no longer produces animated panning but in stead the view is adjusted only when the mouse button is released.

    A feature layer on top (OpenLayers.Feature.Vector) does move when dragged. This makes it look as if the dragging is actually moving the vector layer (in respect to the Google tiles).

    Using: http://openlayers.org/dev/OpenLayers.js

  • 40 ahocevar // Feb 28, 2011 at 8:09 am

    @Vladimir: see http://trac.osgeo.org/openlayers/ticket/3135

  • 41 Vladimir // Mar 1, 2011 at 7:03 am

    Thanks for the speedy response! I also see that the current version of /dev/OpenLayers.js works fine now.

  • 42 Andrew Christensen // Mar 17, 2011 at 11:36 am

    I used the latest version of the OpenLayers js file from the example. It works GREAT for hybrid mode. However, going to satellite mode gives me an error in Firebug.

    Also, this version from dev has a big bug in the bubble popup design.

    I can’t use this sadly because of these issues. Any hope of these being fixed VERY soon?

  • 43 Raphael // Mar 17, 2011 at 1:55 pm

    I have put http://www.openlayers.org/dev/OpenLayers.js and now i have: this.resolutions is undefined.
    Does anyone knows how to fix it?

  • 44 ahocevar // Mar 17, 2011 at 5:25 pm

    @Andrew_Christensen: I cannot reproduce your error in satellite mode. For the popup issue, we need more information so we can fix the issue. The appropriate place to provide this information is the issue tracker at http://trac.osgeo.org/openlayers/. Please do a search there before you create a new ticket, because it may be a known issue already.

    @Raphael: You may want to ask this question at the users list (http://trac.osgeo.org/openlayers/wiki/MailingLists). Don’t forget to post the code that causes the issue in a simplified example.

  • 45 pippo // Feb 4, 2012 at 6:10 pm

    I confirm that the only way to remove the popup is extend the stylesheet with .olLayerGoogleCopyright {visibility: hidden;}. no need to switch to version 3.2 which does nothing but change the style of the popup

  • 46 Munish Mishra // Feb 13, 2012 at 1:37 am

    Thanks to Martin.

    I have switched to the version 3.2 and the issue get resolved.

  • 47 Jorge Delgado // Feb 29, 2012 at 2:56 pm

    Thanks for the help.
    I change to v 3.2 and get resolved

  • 48 Norbert // Mar 19, 2012 at 5:26 pm

    Many thanks.
    I changed at the following page from 2 to 3:
    http://www.mittenwald-ferienzeit.de/karten/Mountainbiketouren-leicht-Haus-Roseneck-1.htm
    Everything was immediately all right.
    I will switch everything over to version 3. now.

  • 49 Silvio // May 14, 2012 at 7:11 pm

    I put
    .olLayerGoogleCopyright
    visibility: hidden;
    in theme/default/style.css
    but “credit pupup” not disappear.
    I do not know what else to do …

  • 50 Silvio // May 14, 2012 at 7:25 pm

    It works! I could hide the “credit pupup”
    but with the following:

    .olLayerGoogleV3.olLayerGooglePoweredBy {
    bottom: 15px !important;
    visibility: hidden;
    }

    in theme/default/style.css

  • 51 ahocevar // May 15, 2012 at 3:12 am

    Congratulations Silvio. You have successfully violated Google’s Terms of Use. The proper way to fix this issue is to use the 3.6 version of the GMaps API, as shown in http://openlayers.org/dev/examples/google-v3.html.

  • 52 Silvio // May 15, 2012 at 7:23 am

    Do not know, I’m an inexpert user. Thanks for warning me. I’ll leave the script as it was.

  • 53 philpro // May 16, 2012 at 11:50 pm

    ahocevar when I view this example, I see a big white layer that says “Map Data”. Was that intended? I am seeing this error suddenly on my maps.

  • 54 rob // May 17, 2012 at 12:18 am

    I am seeing the same pop up too. Please help.

  • 55 str-84 // May 17, 2012 at 2:05 am

    The way from the post #51 doesn’t work. The example http://openlayers.org/dev/examples/google-v3.html shows it.

  • 56 ahocevar // May 17, 2012 at 3:38 am

    Google has just deprecated the 3.6 version of the GMaps API, so even if you specify v3.6, you get v3.7 now, which is not supported by OpenLayers.

  • 57 str-84 // May 17, 2012 at 4:13 am

    ahocevar, thanks for your reply. It’s sad…

  • 58 Lubo // May 17, 2012 at 4:29 am

    I guess Issue#2984 needs to be reopened:
    http://trac.osgeo.org/openlayers/ticket/2984

    I have tried to fix it myself, however only the workaround method seems to work (CSS) and as mentioned above, it is quite a violation of TOS. Moreover, I am unable to figure out, how to make the Google logo and credits link clickable. Any ideas?

  • 59 jvb // May 17, 2012 at 4:31 am

    Ouch! Anyone got a good solution to this? Seems we can’t currently use v3 with OpenLayers, least not without hacking.

  • 60 Matt He // May 17, 2012 at 10:42 am

    I did following, and it seems working.

    div.olLayerGooglePoweredBy.olLayerGoogleV3.gmnoprint { visibility: hidden;}

  • 61 philpro // May 17, 2012 at 10:44 am

    Matt He, as mentioned above, I believe using css to hide this box violates Google Maps TOS

  • 62 Jim Bacon // May 17, 2012 at 12:22 pm

    Possible alternative workaround is to copy the output of http://maps.google.com/maps/api/js?v=3.6&sensor=false to a location on your server, replace references to 3/7/17 with 3/6/15 and 3.7.17 with 3.6.15 and use this file to load the old version of the API. Obviously these files may not be available much longer but you can still get versions back to 3.5.1 if you try.

  • 63 Taroy1 // May 17, 2012 at 3:43 pm

    Here’s the aging OpenLayer’s ticket with no resolution.

    http://trac.osgeo.org/openlayers/ticket/3614

  • 64 ahocevar // May 17, 2012 at 4:07 pm

    Fixed for now. Let’s see for how long the workaround will last this time.

  • 65 philpro // May 17, 2012 at 4:07 pm

    thanks.

  • 66 Taroy1 // May 17, 2012 at 4:46 pm

    I see your fix for 2.12 rc4 but is there any retroactive patch for 2.11?

    https://github.com/openlayers/openlayers/pull/472

  • 67 nattawu // May 20, 2012 at 12:54 am

    help! I used openlayer google map v3 and Geoserver 2.13,but i have a problem is the layer from geoserver didn’t appear on google map v3

  • 68 Arpit garg // May 21, 2012 at 7:18 am

    Fix for copyright mapdata popup coming on top of base map.
    Use latest gmaps version v=3.9
    For an example
    http://maps.google.com/maps/api/js?v=3.9&sensor=false

  • 69 Ivan // May 31, 2012 at 10:02 am

    Hi, I tried all gmaps versions with openlayers and still having the popup issue.

  • 70 Taroy1 // May 31, 2012 at 11:15 am

    Here’s the hotfix for 2.11.

    http://trac.osgeo.org/openlayers/wiki/Release/2.11/GoogleMaps37

  • 71 Munish Mishra // Aug 2, 2012 at 6:22 am

    Hi,
    change the following css class in theme/default/style.css
    //old css class
    .olLayerGooglePoweredBy {
    left: 2px;
    bottom: 15px;
    }
    //new css class
    .olLayerGooglePoweredBy {
    left: 2px;
    bottom: 15px;
    display: none;
    }

    after doing the above fix. my issue get resolved.

  • 72 ahocevar // Aug 3, 2012 at 5:34 am

    People, please read the comments. Setting display to none for the powered-by element is a violation of Google’s terms of use. The real fix is to upgrade to OpenLayers 2.12 or apply http://trac.osgeo.org/openlayers/wiki/Release/2.11/GoogleMaps37.

  • 73 alfred bara // Aug 4, 2012 at 12:21 am

    i want online maps

  • 74 liquid dubstep // Nov 20, 2012 at 9:15 pm

    I didnt expect this, but I like this, found it helpful! Keep up the great work!

  • 75 pavli // Jan 26, 2013 at 6:56 pm

    Hi, I´m creating a map using OpenLayers and Google Satellite as a layer. Is there a way for the map not to switch to the bird´s eye view? is there a way to disable it? also, is there a way to display KML file from a local directory (not server)? I´ve been looking for a way for ages.. thanks for response.

  • 76 furqan // Nov 12, 2013 at 3:20 am

    how to add Google map v3 in openlayer in opengts

  • 77 diego // Nov 21, 2013 at 2:30 am

    To solve the issue of pop ups just use the following url:

    https://maps.googleapis.com/maps/api/js?sensor=false

  • 78 tiefenentspannung // Mar 15, 2014 at 6:31 am

    Pretty great post. I just stumbled upon your blog and wanted to
    say that I’ve really loved surfing around your weblog posts.

    In any case I’ll be subscribing for your feed and I hope you write again very soon!

  • 79 meditationsmusik // Apr 7, 2014 at 7:43 am

    Just want to say your article is as astounding. The clearness
    in your post is simply nice and i could assume you’re an expert on this subject.
    Fine with your permission let me to grab your feed to keep
    up to date with forthcoming post. Thanks a million and
    please carry on the enjoyable work.

Leave a Comment