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.


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;
  • Andy, Thanks very much indeed - that fixed it perfectly and no other side-effects that I can see (so far at least!). Had been looking at the leaflet Google Maps plugin code and have found it utilises "insertAtTheBottom" which I understand is now deprecated. Dave – Dave Martin Jan 9 '13 at 10:24

Have downloaded the plugin to use Google Map tiles as a base map for Leaflet

Just to be clear, this is against the Google terms of service, so proceed with caution.

  • 1
    Not if he's using (psha.org.ru/leaflet/Google.js) which I assume is what he is using. It's written via the maps api so it's not a violation of TOS. – AndyL Jan 4 '13 at 3:13
  • Tom/Andy, Thanks for the comments. Tom - we still use Google Maps "natively" for static maps and where I need to show a single site or single type of site. I am, however, trying to migrate the section that shows many markers of different types so we can utilise the layer-switching of Leaflet (and also switch to alternate base map providers). I'm sorry if my original message didn't make this clear, but we are doing this, as Andy mentioned, by using the Leaflet Google Maps plugin which in turn uses the Google Maps v3 API - we aren't trying to call the tiles directly. Dave – Dave Martin Jan 9 '13 at 10:36

Some other numbers on the z-indexes, shown elsewhere, worked on my end. Cross-posting from here: https://gist.github.com/crofty/2197042#comment-1234339

    z-index: 0 !important;
    z-index: 100;

(put this in your webpage's CSS or <style> section )


Try to put this into your css:

.leaflet-google-layer {
    z-index: inherit;

This helped me in same situation


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.