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

  • 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 – Joel Williamson Sep 1 '15 at 18:05
  • Well... it solved my problem. – Alophind Sep 1 '15 at 19:40
  • @JoelWilliamson link solved problem! what a savior! – wayofthefuture Sep 2 '15 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 '15 at 18:35
2

Change the version number for the google script to 3.5:

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

  • 2
    this solution is not working anymore – AlexGreg Nov 18 '15 at 16:08
  • This solution is not working anymore. Please someone help me find the solution! – wayofthefuture Nov 21 '15 at 16:19
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

  • Can you please share the exact changes you've made? – AlexGreg Nov 19 '15 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 '15 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. – wayofthefuture Nov 21 '15 at 16:33
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.

  • Well... it solved my problem. – Alophind Sep 1 '15 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});
  • That has nothing to do with it neither. Its the answer above yours. – g07kore Dec 2 '15 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.