A Leaflet plugin that allows easy integration with the Google Maps API
For a working example (without API Key) see demo
Initally based on the work of James “Crofty” Croft
- include CSS & JavaScript
<head> ... <style> html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet-src.js"></script> <script src="https://raruto.github.io/cdn/leaflet-google/0.0.3/leaflet-google.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=<INSERT_HERE_API_KEY>"></script> ... </head>
- choose a div container used for the slippy map
<body> ... <div id="map"></div> ... </body>
- create your first simple “leaflet-google” slippy map
<script> var map = new L.Map('map', { center: [41.4583, 12.7059], zoom: 5, markerZoomAnimation: false, zoomControl: false }); var zoomControl = new L.Control.Zoom({ position: 'topright' }); var ggl = new L.Google('ROADMAP'); // Possible types: SATELLITE, ROADMAP, HYBRID, TERRAIN var url = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', attr = 'Map data: © <a href="https://rs.http3.lol/index.php?q=aHR0cDovL3d3dy5vcGVuc3RyZWV0bWFwLm9yZy9jb3B5cmlnaHQ">OpenStreetMap</a>, <a href="https://rs.http3.lol/index.php?q=aHR0cDovL3ZpZXdmaW5kZXJwYW5vcmFtYXMub3Jn">SRTM</a> | Map style: © <a href="https://rs.http3.lol/index.php?q=aHR0cHM6Ly9vcGVudG9wb21hcC5vcmc">OpenTopoMap</a> (<a href="https://rs.http3.lol/index.php?q=aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LXNhLzMuMC8">CC-BY-SA</a>)', otm = new L.TileLayer(url, { attribution: attr, /*subdomains:"1234"*/ }); var baseLayers = { "Google Map": ggl, "Leaflet Map": otm, }; var layersControl = L.control.layers(baseLayers, null, { collapsed:false }); layersControl.addTo(map); zoomControl.addTo(map); map.addLayer(ggl); </script>
NB to be able to use the “pegman” (a.k.a. “Street View Control”) you MUST use a valid Google Maps API Key.
Compatibile with: leaflet@1.3.2, gmaps@3.34