[GIS] How to add marker in Leaflet base on Google Maps layer

embeddable-web-mapsgoogle-maps-apileafletweb-mapping

I have tried many way to add marker base on Google Maps but it doesn't work at all, but if I changed my base map to such as open street map which provide by Ersi or Leaflet, it does work.

Why is it that the only Google Maps layer doesn't work?

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
   <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
    <script src="jquery-3.2.0.min.js"></script>
    <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
    </style>
  </head>
  <body>

<div style="height:100%" id="map"></div>
<script type='text/javascript'>
  var map = new L.Map('map', {center: new L.LatLng(53.38112899999999, -1.47008500000004), zoom: 10});
  map.options.maxZoom = 14;map.options.minZoom = 9;
  var googleLayer = new L.Google('ROADMAP');
  map.addLayer(googleLayer);

  $.getJSON("CC.geojson",function(data){
        L.geoJson(data,{ 
            pointToLayer: function(feature,latlng){ 
                var marker = L.marker(latlng);
                marker.bindPopup(feature.properties.Sectors);
                return marker;
            }   
        }).addTo(map);
   }

</script>

Best Answer

The plugin you found on matchingnotes to use Google Maps tiles places the Google Layer on top of the map pane (with .leaflet-top and .leaflet-bottom classes that specify a z-index: 1000), therefore it hides any other layer, including your marker(s).

To restore them, simply remove that z-index, for example with:

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

However, you will then notice the lag between Leaflet panning (which moves the marker) and the Google layer.

Demo: http://playground-leaflet.rhcloud.com/gipu/1/edit?html,output

You should notice that the plugin you use is not compatible with Leaflet 1.0 and above (see Leaflet issue #3881), so you should use version 0.7.7.

But a better solution would probably be to change the plugin, now you have more alternatives, like Leaflet.GridLayer.GoogleMutant (demo).

A LeafletJS plugin to use Google maps basemaps.

Related Question