Cómo utilizar Leaflet y Google Maps

by David Burgos

Si has buscado cómo usar los mapas de Google con la librería Leaflet, habrás revisado la lista de plugins oficiales e incluso habrás visto la demo rusa.

Encontré un ejemplo, pero actualmente ya no funciona.

Solución

El problema de ese ejemplo era el CDN de leaflet, el subdominio cambió de code a cdn.

Corrigiendo todo, el ejemplo funcionando es el siguiente:

<!DOCTYPE html>
 <html>
  <head>
   <title>Leaflet</title>
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.3.1/leaflet.css" />
   <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="https://gist.github.com/raw/4504864/c9ef880071f959398b7cf0b687d4f37c352ea86d/leaflet-google.js"></script>
 </head>
 <body>
  <div style="width:500px; height:500px" id="map"></div>
  <script type='text/javascript'>
    var map = new L.Map('map', {center: new L.LatLng(51.51, -0.11), zoom: 9});
    var googleLayer = new L.Google('SATELLITE');
    map.addLayer(googleLayer);
  </script>
 </body>
</html>

Puedes ver el ejemplo corriendo en JSFiddle.

Recuerda actualizar a la última versión disponible de Leaflet, la v0.7.3 en este momento.