单张地图-有时显示，有时不显示，为什么？

Question

Firefox 24.0 and the most recent Chrome both seem to refuse to load my leaflet map...but low and below -- it loads on Safari on my Iphone (not useful, but interesting to note).

This is my first stab at Leaflet and Bootstrap...other then the .container working unpredictably when I called it from localhost...I haven't had any problems until I tried to load it onto a webpage...

I am mostly curious why this is, I haven't seen something like this before...

Thanks!

Site: Link to Leaflet Map

Any thoughts maybe?

Answer 1

Ok the issue is probably related to cdn and security. When I open your sample site in Chrome it gives me a warning that a script is being loaded from unauthoriced sources.

Since FF23 these scripts are also blocked directly in the browser, and you get error messages as such:

Blocked loading mixed active content "http://code.jquery.com/jquery-1.10.1.min.js"

When I allowed to load unauthorized scripts in chrome, (there is a little shield icon in the address bar) it worked without a problem!

So try to provide these scripts locally, it might have something to do with google drive, that it is more restrictive because of javascript threats as such.

I hope it helped, and if you think this is the solution please mark it as an answer.

Thanks

Answer 2

You are loading leaflet.js before jquery, I get 9 js errors on the page.

One of them says:

ReferenceError: jQuery is not defined

Is leaflet dependend on jquery? Then you should load it first...

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>    
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>