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.