Question

I’m working on a project where I use a google map. I use HTML5 geolocalization to set up the map.
If the geolocalisation is not supported or refused then I arbitrarly set the map center.

My problem is about two things:

• A first one about google map loading : when the geolocaization is accepted, the map is anormaly slow to load (I’m in China right now, could it be a reason ?). In firefox it even never load… There is no javascript error though.

• More generally the display of the entire website is very buggy. After zooming out the map enough you should see a marker displayed. That’s fine, but a specific content is normally visible under the map. This content is barely visible, or hidden by an uggly black block spreading on the whole width of the window…

I’m using bootstrap (including responsive CSS file and the javascript plugin), awesomefont, and some additional javascript code.

Would you have any idea ? Especially for the second point that drives me crazy…

Thanks

EDIT
How could you help me if I don’t give the URL to check out the problems:it’s here

Answer 1

There is an error in http://victorinox.pythonanywhere.com/static/js/manager_functions.js , Line 143:

map.setCenter(google.maps.LatLng(loc.coords.latitude, loc.coords.longitude));

has to be

map.setCenter(new google.maps.LatLng(loc.coords.latitude, loc.coords.longitude));
//------------^

What else: Firefox doesn’t fire the error-callback when the user denies the permission for HTML5-geolocation. Because of that and the fact that there hasn’t been set a center for the map anywhere else the map will not load, because center is a required option.

You may think the center will be set in initialize, but in firefox initialize never will be called when the user denies the permission for geolocation. Take a look at this:

$(function() {
     //creates the map, no center will be set in createMap()
    map = createMap();
     //in firefox there will not be set a center
     //when user denies permission, because error-callback will not execute
    geolocalize();
     // when the map 
    center = map.getCenter();
     //will never run, because when the map doesn't have a center 
     //there will no tiles load
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
        initialize();
    });
})

suggestion:
Currently you have a flickering present for the markers. You reload the markers on multiple events(zoom_changed, dragend,resize), delete all markers and create them new based on a XHR-response.

Instead you should create a cache for the markers(where you can identify them, e.g. based on some ID given by the XHR-response).
When you got a new response create new markers only when they are not inside the cache, the other markers keep visible on the map(I don’t see any benefit when you remove/hide markers that are not visible inside the viewport)

Also it should be sufficient to update the markers on bounds_changed only instead of the 3 events.