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>
