1

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>

Improve this question
3

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.

Improve this answer

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.