View on GitHub


Leaflet plugin that allows an easy integration with the Google Maps API


A Leaflet plugin that allows easy integration with the Google Maps API

For a working example (without API Key) see demo

Leaflet+Google Logos

Initally based on the work of James “Crofty” Croft

How to use

  1. include CSS & JavaScript
     <style> html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } </style>
     <link rel="stylesheet" href="" />
     <script src=""></script>
     <script src=""></script>
     <script src="<INSERT_HERE_API_KEY>"></script>
  2. choose a div container used for the slippy map
       <div id="map"></div>
  3. create your first simple “leaflet-google” slippy map
       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}{z}/{x}/{y}.png',
         attr =
         'Map data: &copy; <a href="">OpenStreetMap</a>, <a href="">SRTM</a> | Map style: &copy; <a href="">OpenTopoMap</a> (<a href="">CC-BY-SA</a>)',
         otm = new L.TileLayer(url, {
           attribution: attr,
       var baseLayers = {
         "Google Map": ggl,
         "Leaflet Map": otm,
       var layersControl = L.control.layers(baseLayers, null, { collapsed:false });

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

Contributors: Bencevans, Crofty, Raruto