Cómo utilizar Google Maps API en leaflet-cloudmade

Question

¿Hay alguna forma de integrar Google Maps con leaflet-cloudmade? Quiero decir, no quiero usar el mapa original en la nube, pero quiero usar Google Maps en su lugar. Quiero mostrar un mapa de Alaska (no hay muchos caminos allí). Si uso un mapa hecho en la nube, sería simplemente blanco.

Esto es lo que hago si quiero usar un mapa CloudMade:

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 
}); 

Sé que debería cambiar el 'http: // {s} .tile.cloudmade.com/TU-API- KEY/997/256/{z}/{x}/{y} .png ' parte. Pero, ¿qué debo escribir allí si quiero usar google map (o cualquier otro mapa)?

Esta es la documentación de leaflet-cloudmade (no dicen mucho sobre el uso de third-party map provider. Dicen que son agnósticos sobre el proveedor de mapas utilizado en nuestra aplicación, por lo que creo que debería ser posible utilizar Google Maps) .

Answer 1

Google no le permite usar sus teselas sin usar su propia API para obtenerlas. Ver el General Terms:

No haga un mal uso de nuestros servicios. Por ejemplo, no ... intente acceder a ellos utilizando un método que no sea la interfaz y las instrucciones que proporcionamos.

Cualquier cosa es posible, por supuesto, por lo que es posible conseguir los azulejos sin la API, pero su acceso se puede bloquear sin previo aviso:

Podemos suspender o dejar de prestar nuestros servicios a usted si no cumple con nuestros términos o políticas o si estamos investigando una sospecha de mala conducta.

Dicho esto, la API Folleto no se ve muy diferente de la API de Google, por lo que la conversión a utilizar su API bien puede valer la pena considerar.

Answer 2

Hay un complemento de terceros que proporciona la integración de Google Maps en el prospecto para poder agregarlo como una capa: http://psha.org.ru/b/leaflet-plugins.html. Sin embargo, actúa como proxy de la API v3 original de Google Maps, por lo que no funciona tan bien como las simples capas de teselas de Leaflet, y lamentablemente no se pueden usar mosaicos de Google Maps directamente debido a las restricciones de Términos de uso (como en la respuesta encima).

Answer 3

El official leaflet.js plugins page hace referencia al paquete Plugins by Pavel Shramov.
Proporcionado Google.js le da acceso a mosaicos de Google Maps mediante Google Maps API v3, con respecto a los términos de uso.

Aquí está un ejemplo rápido: se puede usar mediante la adición de primera

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

y luego construir su mapa:

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

---

Nota: también hay algunas horquillas mencionados en this gist.

Answer 4

En realidad no es Google Maps, pero hay una gran variedad de diferentes proveedores Folleto Mapa con códigos de ejemplo disponibles en http://leaflet-extras.github.io/leaflet-providers/preview/

Tal vez es posible encontrar un proveedor adecuado para su problema específico allí. Como ventaja, evitará los problemas que señaló Andrew Leach. De todos modos, aunque no esperaba que no lo supieras, pero aún así no quiero dejar esto, ten en cuenta que algunos (pero no todos) los proveedores de mapas son comerciales y, por lo tanto, es posible que tengas que pagar por el servicio. o puede molestar sobre otras TOSes.

Answer 5

De this:

Este plugin for Debian carece de este problema, pero no cumple con los términos de servicio de Google (Oficial example).

O probar este código:

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