4

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

4
  • I am experiencing the same issue. I also find that the version 2 examples at openlayers.org are having the same problem. Frankly, it vexes me - why should SATELLITE work and ROADMAP not? And why does a switch back and forth cause the problem to disappear? ************* Sorry if my post was not helpful. I did further research, and found that Thomas B had a suggestion that helped me (link). He suggested changing the version in the Google Sep 1, 2015 at 18:05
  • Well... it solved my problem.
    – Alophind
    Sep 1, 2015 at 19:40
  • @JoelWilliamson link solved problem! what a savior! Sep 2, 2015 at 2:38
  • At the time it was originally posted and flagged (and hence reviewed), the post contained no answer, just "I'm having this problem too". After reviews had begun it was apparently edited to contain a solution, but I guess it was converted to a comment anyway after that point. Because it was converted apparently I can't cast undelete votes on it, though I can see it. I'll flag it (and Joel could do the same), because it is now a valid answer.
    – Chris W
    Sep 2, 2015 at 18:35

4 Answers 4

3

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

3
  • Can you please share the exact changes you've made?
    – AlexGreg
    Nov 19, 2015 at 11:51
  • You have to compare my version of OpenLayers.js 2.13.2 with the official OpenLayers.js 2.13.1 with your favorite compare tools, even if minified code doesn't make the task really easy...
    – FredC
    Nov 20, 2015 at 22:19
  • Is there anyway to load this mod as an overriding of the 2.13 library (like overriding a default js prototype). Instead of using an unofficial library, I'd rather just overwrite/override the code with the new code, so I can see what I'm changing. Nov 21, 2015 at 16:33
2

Change the version number for the google script to 3.5:

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

2
  • 2
    this solution is not working anymore
    – AlexGreg
    Nov 18, 2015 at 16:08
  • This solution is not working anymore. Please someone help me find the solution! Nov 21, 2015 at 16:19
2

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.

1
  • Well... it solved my problem.
    – Alophind
    Sep 1, 2015 at 19:40
0

need zoom level to make it work

var groadMap = new OpenLayers.Layer.Google("Google Roadmap",{type:google.maps.MapTypeId.ROADMAP,numZoomLevels: 20});
1
  • That has nothing to do with it neither. Its the answer above yours.
    – g07kore
    Dec 2, 2015 at 18:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.