Map container is already initialized

[Thomas Butler]

Anyone run into this before?? Everything is fine the first time the
page loads, but when you go back to the page I get a blank map and
firebug throws this error: "Map container is already initialized"...
JQuery mobile web application.

[MatheuB]

Yes, in my case, I had to delete the node containing the div id=map
when leaving the page, and recreate it dynamically when entering the
page again.

[Thomas Butler]

I figured it out :). I was pulling the map into a <div> with Ajax. What I ended up doing was adding another div inside the ajax page and populating that with the map prior to insertion. Worked like a charm!

[Thomas Butler]

[Eric]

I've been having this problem, as well, but it sounds like our Jquery
Mobile pages are set up differently. I have a basic index.html page
with a couple of JQM "pages" using a navbar for navigation. The
content of one of those pages is a populates with a Leaflet map, but
breaks when using the navbar navigation with the Error "Error: Map
container is already initialized." Something about the way JQM loads
the content (ajax).

Seems like I've been able to fix this by intercepting using the
pagebeforechange event, and manually setting the correct "page".

For example:
$(document).bind('pagebeforechange', function(e, data) {
console.log("url: " + data.toPage);
if(typeof(data.toPage) !== 'string')
return;
//get the hashtag target
var hashParts =
$.mobile.path.parseUrl(data.toPage).hash.split('-');
var index = -1;
if(hashParts.length === 2)
index = parseInt(hashParts[1]);
var options = data.options;
if(hashParts[0] === "#map")
window.app.refreshMap (index, options);
else
return; // fall back to default behavior

e.preventDefault();
});


var app = refreshMap:function(){
$.mobile.changePage($("#map-page")); //the id of my jqm page
};

[BeerBuddha]

So instead of having the map id outside the ajax - when you called the ajax the map div is inside the ajax?

i tried that - but the map still doesnt rendered

or did you also initialize the map through ajax and that fixed the problem

[Carst Vaartjes]

Hi, 

I have a similar problem, as soon as you add the jquery mobile links to it ->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

I get a "Map container is already initialized". I don't really understand this to be honest:

I figured it out :). I was pulling the map into a <div> with Ajax. What I ended up doing was adding another div inside the ajax page and populating that with the map prior to insertion. Worked like a charm!

What do you mean exactly? Any div that is initialized by Leaflet conflicts with Jquery Mobile for me. Unless there is a way to limit Leaflet to one div and Jquery Mobile to the rest of the page?

BR

Carst

[Артём Ковалёв]

 
<div id="weathermap"></div>

  function buildMap(lat,lon)  {
       document.getElementById('weathermap').innerHTML = "<div id='map' style='width: <?php echo $this->width; ?>; height: <?php echo $this->height; ?>;'></div>";
       var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' +
                ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
        var map = new L.Map('map');
        map.setView(new L.LatLng(lat,lon), 9 );
        map.addLayer(osmLayer);
        var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'en'});
        map.addLayer(validatorsLayer);
    }

i use  this :: document.getElementById('weathermap').innerHTML = "<div id='map' style='width: <?php echo $this->width; ?>; height: <?php echo $this->height; ?>;'></div>";
to reload content of div where render map.

пятница, 18 мая 2012 г., 23:05:43 UTC+3 пользователь Thomas Butler написал: