Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
up vote 12 down vote accepted

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;
share|improve this answer
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.

share|improve this answer
Not if he's using ( 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:

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

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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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