OpenLayers: Adding more than one Google layer leads to white screen after map resize
While trying to create an OpenLayers map which would dynamically fill whole page, I run into a problem. Ater I minimize and then maximize browser window the map becomes blank. Actually, it can happen after any window resize, but minimizing/maximizing does the trick every time. I use Firefox 4, but same bug occurs in all other browsers.
After a bit 开发者_Python百科of experimentation I found out that this only happens if I add more than one Google Layer to the map. GoogleStreets alone work perfectly; GoogleStreets + GoogleHybrid (or any other pair) results in white screen.
Interestingly, if I switch betweeen layers before resizing window, everything works normally.
Am I doing something wrong here? Check my code below (it can be run on any local machine, all libraries come from CDN).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mappa Mundi</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css"/>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/google.css" type="text/css"/>
<script src="http://maps.google.com/maps/api/js?v=3.3&sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
body {
font-size: 0.75em; font-family: Verdana;
margin: 0; padding: 0;
}
.b-map-openlayers {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map-openlayers" class="b-map-openlayers"></div>
<script type="text/javascript">
/*<![CDATA[*/
MapTest = function(cfg)
{
var self = this;
var i;
self.$mapContainer = $('#'+cfg.containerId);
self.updateContainerSize();
// Creating map
self.map = new OpenLayers.Map(cfg.containerId, {
controls:[]
});
// Handle window resize event
$(window).bind('resize', self, self.updateMapSize );
var gmap = new OpenLayers.Layer.Google("Google: Streets", {
numZoomLevels: 20,
sphericalMercator: true
});
var ghyb = new OpenLayers.Layer.Google("Google Hybrid", {
type: google.maps.MapTypeId.HYBRID,
numZoomLevels: 20,
sphericalMercator: true
});
// !!! This is the source of the problem. Remove ghyb - and everything's fine
self.map.addLayers([gmap, ghyb]);
self.map.setCenter( new OpenLayers.LonLat(0, 0), 5 );
self.map.addControl(new OpenLayers.Control.LayerSwitcher({roundedCornerColor: '#3f3f3f'}));
self.map.addControl(new OpenLayers.Control.DragPan());
self.map.addControl(new OpenLayers.Control.PanZoomBar());
self.map.addControl(new OpenLayers.Control.Navigation());
};
MapTest.prototype =
{
updateContainerSize: function()
{
var self = this;
var mapHeight = $(window).height();
var mapWidth = $(window).width();
self.$mapContainer.height(mapHeight);
self.$mapContainer.width(mapWidth);
},
updateMapSize: function(event)
{
var self = event.data;
self.updateContainerSize();
self.map.updateSize();
}
};
$(document).ready(function() {
var mapTest = new MapTest({
containerId: 'map-openlayers'
});
});
/*]]>*/
</script>
</body>
</html>
In both Chrome 11.x and Chrome 13.x it works as expected.
In FireFox 4 indeed the images don't show. I get a message 'Helaas hebben we hier geen beelden van ', which means something like Unfortunately we don't have any imagery of this.
There are 2 fullscreen examples for OpenLayers:
- http://openlayers.org/dev/examples/fullScreen.html
- http://openlayers.org/dev/examples/fullScreen2.html
Maybe you can use those as a starting point, and add the Google layers, to see if that makes any difference.
Alternatively, you could try to start from the Google Maps V3 example, and make that one fullscreen. It lets you switch between 4 google maps base layers, similar to what you're trying to do.
- http://openlayers.org/dev/examples/google-v3.html
I don't have the time to try these things myself at this moment, but I hope this helps you to find a solution to your problem.
加载中,请稍侯......
精彩评论