[GIS] Leaflet / Google Map baselayer / markers not visible

google mapsleafletmarkers

New to Leaflet, currently trying to migrate a project from native Google Maps to Leaflet; having been drawn to Leaflet by the layer management and options of using better 'roadmap' style basemaps.

Have downloaded the plugin to use Google Map tiles as a base map for Leaflet,and its working great as a base layer.

However I have found a problem, and I'm not sufficiently experienced with Leaflet to understand why. I have markers which are visible with any other base layer – but not with Google. Have tried forcing Z order high (1000 etc.) but it makes no difference. Opacity of the markers is full 1.0

Markers are visible on all other layers (e.g. OSM), when I switch base to Google (satellite or map) they're no longer shown, but switch back to a non-Google base and they're there again.

The reason I'm pursuing the Google base layer is that Google is (as far as I'm aware) the only provider of detailed consistent aerial photographic tiles for my region of interest. Wish to use other maps but have option to switch to a Google 'satellite' view via the layer manager.

Currently using Leaflet v0.4.5 ( but have also tried v0.4 ), same symptoms occur using different browsers (IE, FF etc.).

Would be grateful for any assistance.

Best Answer

Just a quick fix: you were on the right track with the z-index. Try adding this to your own css file (may break other things! I simply got it to display the markers):

.leaflet-map-pane {
    z-index: 2 !important;
}

.leaflet-google-layer {
    z-index: 1 !important;
}
Related Question