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 it's 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.).

4 Answers 4


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;

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, 2013 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 Jan 9, 2013 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 and acknowledge you have read our privacy policy.

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