Leaflet in google maps

Question

Can we use leaflet in google maps? Searching and reading articles about it, we found that there are some leaflet plugins available. Using that we can build application using google map + leaflet.

Answer 1

For the static purpose you can freely add the google map tiles inside your leaflet. You doesn't need to add the third party plugin and google API. For the static tiles, you can add following code, for street,

googleStreets = L.tileLayer('http://{s}.google.com/vt?lyrs=m&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

Hybrid,

googleHybrid = L.tileLayer('http://{s}.google.com/vt?lyrs=s,h&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

satellite,

googleSat = L.tileLayer('http://{s}.google.com/vt?lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

Terrain

googleTerrain = L.tileLayer('http://{s}.google.com/vt?lyrs=p&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

Note that difference in the "lyrs" parameter in the URL:

Hybrid: s,h;
Satellite: s;
Streets: m;
Terrain: p;

Answer 2

Just to be clear: Leaflet is just a viewing library, whereas Google Maps provides both the base maps (tiles) and an API (like Leaflet).

Google Maps requires that you use exclusively its API when using its base maps.

However, there is indeed a plugin for Leaflet that claims to act as a proxy for the Google Maps API, hence respecting its Terms of Use, so YES it sounds do-able.

Then you are left with the decision of using Leaflet with that plugin or directly using Google Maps API. At this point this sounds more like a question of which one provides you with the features you are looking for.

---

Update

The originally mentioned plugin is no longer maintained.

Here is a more recent one: Leaflet.GridLayer.GoogleMutant

Answer 3

You can use leaflet JS API kit and use google maps imagery in it.

Edit:

Check this example in which google tiles/imagery is used along leaflet kit.

var map = new L.Map(
  'map', 
  {
    center: new L.LatLng(51.51, -0.11), 
    zoom: 9
  }
);

var googleLayer = new L.Google('ROADMAP');

map.addLayer(googleLayer);

#map {
  height: 500px;
  width: 500px;
}

<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>

<div id="map"></div>

Source: https://gist.github.com/crofty/2197701