NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum

Hi All, I hope this is the right place to ask this question:

I have just installed leaflet/cloudmap for the first time and while the map appears to works as it should, I get the error that “Map container is already initialized. (7 out of range 4),”

Having searched on the web, some people say that the map div is being created twice (I couldn’t see this myself).

Does anyone know how to fix this bug? All help is much appreciated!

Thanks, Lee

asked 24 May '12, 15:52

LondonLee's gravatar image

LondonLee
1111
accept rate: 0%

edited 24 May '12, 16:44

Tordanik's gravatar image

Tordanik
12.0k15106147

Perhaps pastebin the code (or if it's small, add it as a comment here - Richard's example here is only 15 lines long, after all)

(24 May '12, 16:18) SomeoneElse ♦

Hi,

The code is as follows, it is the basic code example. it does sit within a page that also does a JSON call etc.

Much appreciated!

    <script src="leaflet/dist/leaflet.js"></script>

    <div id="map" style="height: 200px"> <a href="#" data-role="button" id="getLocation">Get my location</a> </div>

    <script>

            $('#getLocation').click(function(){

            map = new L.Map('map');

            var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/myapikey/997/256/{z}/{x}/{y}.png',
            cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
            cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
            map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);

            var markerLocation = new L.LatLng(51.5, -0.09),
            marker = new L.Marker(markerLocation);
            map.addLayer(marker);
            marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

            });
(24 May '12, 16:31) LondonLee

Before initializing map check for is the map is already initiated or not

var container = L.DomUtil.get('map'); if(container != null){ container._leaflet_id = null; }

permanent link

answered 26 Apr '18, 05:42

Dipin%20Raj%20C's gravatar image

Dipin Raj C
1
accept rate: 0%

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×74
×2

question asked: 24 May '12, 15:52

question was seen: 31,561 times

last updated: 26 Apr '18, 05:42

NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum