I'm using the below-given code to demonstrate OpenLayers
map in DIV
container. I don't know why but I must re-open the web-page several times in order the map becomes visible. This is not the question of internet connection speed. I just really must click on several jquery tabs, and finally the map is opened in specified tab. Indeed no error message is generated. It happens in Chrome and Firefox. I don't know if it's a bug or my mistake.
Please any suggestion is HIGHLY appreciated.
mainPage.php
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs({
ajaxOptions: {
success: function( html ) {
$("#content").html(html);;
}
}
});
});
</script>
<div id="tabs">
<ul>
<li><a href="administration.php"><span>Administration</span></a></li>
<li><a href="map.php"><span>Map</span></a></li>
</ul>
</div>
map.php
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("basicMap");
map.addLayer(new OpenLayers.Layer.OSM());
var points = new OpenLayers.Layer.Text( "Resource Locations",
{ location: "dataLonLat.php",
projection: map.displayProjection
});
map.addLayer(points);
var geographic = new OpenLayers.Projection("EPSG:4326");
var mercator = new OpenLayers.Projection("EPSG:900913");
//Set start centrepoint and zoom
var lonLat = new OpenLayers.LonLat(2.07632,41.30408)
.transform(
geographic, // transform from WGS 1984
mercator // to Spherical Mercator Projection
);
var zoom=16;
map.setCenter (lonLat, zoom);
</script>
<div id="basicMap" style="width: 100%; height: 100%;">
</div>
I think your script «map» script is evaluated before #basicMap is add to the page. In map.php
, try to put your #basicMap first and your script tags after.