How to use Google Maps API in leaflet-cloudmade

Question

Is there any way to integrate Google Maps with leaflet-cloudmade? I mean, I don't want to use the original cloudmade map, but I want to use Google Maps instead. I want to show a map of Alaska (not many roads there). If I use a cloudmade map, it would be just white.

This is what I do if I want to use cloudmade map:

var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
});

I know I should change the 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png' part. But, what should I write there if I want to use google map (or any other map)?

This is the documentation of leaflet-cloudmade (they don't say that much about using third-party map provider. They say they are agnostic about map-provider used in our application, so I think it should be possible to use Google Maps).

Answer 1

The official leaflet.js plugins page references the Plugins by Pavel Shramov package.
The provided Google.js gives you access to Google Maps tiles by using Google Maps API v3, with respect to the terms of use.

Here is a quick example: you can use it by first adding

<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="path/to/Google.js"></script>

and then build your map:

var map = new L.Map('map', {center: new L.LatLng(43.6481, -79.4042), zoom: 13});
var gmap_layer = new L.Google('ROADMAP');
map.addLayer(gmap_layer);

---

Note: there are also some forks mentioned in this gist.

Answer 2

Google don't allow you to use their tiles without using their own API to get them. See the General Terms:

Don’t misuse our Services. For example, don’t ... try to access them using a method other than the interface and the instructions that we provide.

Anything is possible, of course, so it's possible to get the tiles without the API, but your access may be blocked without warning:

We may suspend or stop providing our Services to you if you do not comply with our terms or policies or if we are investigating suspected misconduct.

That said, the Leaflet API doesn't look very different from the Google API, so conversion to use their API may well be worth considering.

Answer 3

There's a third-party plugin that provides integration of Google Maps into Leaflet to be able to add it as a layer: http://psha.org.ru/b/leaflet-plugins.html. However it acts as a proxy to the original Google Maps API v3, so it doesn't work as smoothly as simple Leaflet tile layers, and unfortunately you can't use Google Maps tiles directly because of Terms of Use restrictions (like in the answer above).

Answer 4

It's not actually Google Maps, but there is a great variety of different LeafLet Map Provider with sample codes available at http://leaflet-extras.github.io/leaflet-providers/preview/

Maybe you might find a provider appropriate to your specific problem there. As a plus you will avoid the issues Andrew Leach pointed out. Anyway - not that I expected you not to know, but still I don't to want to leave this out - please note that some (but not all) of the map providers are commercial ones and thus you might have to pay for the service or might bother about other TOSes.

Answer 5

From this:

This plugin for Debian lacks this problem, but does not meet terms of service of google (Oficial example).

Or try this code:

var map = L.map( 'map' ).setView( [ 51.505, -0.09 ], 13 );

L.tileLayer( '//mt{s}.googleapis.com/vt?x={x}&y={y}&z={z}',
{
  maxZoom: 18,
  subdomains: [ 0, 1, 2, 3 ]
} ).addTo( map );

var marker = L.marker( [ 51.5, -0.09 ] ).addTo( map );