google.maps.ROADMAP doesn't show on OL unless I change base layer and re apply

Question

I have web app with OL 2.13 and google street as base layer. Everything worked fine till couple of days ago, suddenly (without any change) the map loads white (no errors in console) and only if I load the map with different base layer (hybrid or satellite) and than choose google street , than the layer is drawn.

Any idea what might cause this behavior ?

 map = new OpenLayers.Map('myMap', {
        units: 'm',           
        zoomMethod: null,
        projection: epsg900913,
        displayProjection: epsg4326            
    });


    var ggl = new OpenLayers.Layer.Google('1',{type: google.maps.MapTypeId.ROADMAP });
    var sat = new OpenLayers.Layer.Google('2', {type: google.maps.MapTypeId.SATELLITE});
    var hybrid = new OpenLayers.Layer.Google('3', {type: google.maps.MapTypeId.HYBRID});

    map.addLayers([ggl,hybrid,sat]);

I

Answer 1

As AlexGreg said on 2015-11-18, the Dude2TheN solution doesn't work anymore since Javascript Google Maps API v3.20 have been retired yesterday.

But I've implemented with success Jim Bacon (and szekerest) solution : you need to use an updated (and so unofficial) version of OpenLayers.js 2.13.1.

I've shared a copy of my resulting and modified file (tagged 2.13.2 for internal purpose, but keep in mind that it's not an official release) : but my original OpenLayers.js 2.13.1 was actually a custom file, an extract of the official OpenLayers.js 2.13.1 (for performance purpose, I get rid of whole parts that I didn't use with a tool which name I forget), so consider this file as a model to see the modification involved and keep in mind that if you use some OpenLayer component that I did not included, it won't work at all...

Update : after further attempt, here is a complete version of unofficial OpenLayers.js 2.13.2 based on official OpenLayers.js 2.13.1, that includes all OpenLayers component

Update 2 : for AlexGreg, this is my modification between official OpenLayers.js 2.13.1 (at line 1081):

{if(e.parentNode!==c.div)if(b.rendered)c.div.appendChild(e),b.googleControl.appendChild(c.viewPortDiv),google.maps.event.trigger(this.mapObject,"resize");else{var h=this;google.maps.event.addListenerOnce(this.mapObject,
"tilesloaded",function(){b.rendered=!0;h.setGMapVisibility(h.getVisibility());h.moveTo(h.map.getCenter())})}this.mapObject.setMapTypeId(d)}else

and my unofficial OpenLayers.js 2.13.2 :

{if(e.parentNode!==c.div){if(!b.rendered){var h=this;google.maps.event.addListenerOnce(this.mapObject,"tilesloaded",function(){b.rendered=!0;h.setGMapVisibility(h.getVisibility());h.moveTo(h.map.getCenter());b.googleControl.appendChild(c.viewPortDiv)})}else{b.googleControl.appendChild(c.viewPortDiv)}c.div.appendChild(e),google.maps.event.trigger(this.mapObject,"resize");}
this.mapObject.setMapTypeId(d)}else

But actually, it's the exact modification proposed by Jim Bacon, I've just integrated them in a complete operational file

Answer 2

Change the version number for the google script to 3.5:

http://maps.google.com/maps/api/js?v=3.5

Answer 3

I did further research, and found that Thomas B had a suggestion that helped me (link). He suggested changing the version in the Google Maps API script tag to 3.5 from 3. So instead of using:

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

Use:

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

When I made the change, the ROADMAP layer loaded properly.

---

Update: the original fix is no longer working, so I did more searching, and I found a solution using Jim Bacon's Oct 7 comment at this link:

https://github.com/openlayers/openlayers/issues/1450#issuecomment-146207698

vitalidze applied Jim's patch to OpenLayers.js at the link in his comment:

https://github.com/vitalidze/traccar-web/commit/b7485a2a2acc12d5df9744f82b3c72468c9cb6ae

and you can see his modified file in a raw view at GitHub here:

https://raw.githubusercontent.com/vitalidze/traccar-web/b7485a2a2acc12d5df9744f82b3c72468c9cb6ae/src/main/webapp/js/openlayers/OpenLayers.js

Not being adept at GitHub, I copied the raw view at that last link to my clipboard and saved it as OpenLayers.js, and when I use this version with Google Maps, I no longer have the problem with the ROADMAP not loading initially.

Answer 4

need zoom level to make it work

var groadMap = new OpenLayers.Layer.Google("Google Roadmap",{type:google.maps.MapTypeId.ROADMAP,numZoomLevels: 20});