public
Last active

A example of using Google Map tiles with the Leaflet mapping library - http://matchingnotes.com/using-google-map-tiles-with-leaflet

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<!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="http://matchingnotes.com/javascripts/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('ROADMAP');
map.addLayer(googleLayer);
</script>
</body>
</html>

Awesome work Crofty! Very useful, worked like a dream.

Thanks Crofty! Just a heads up to anyone that may try this though, the google maps layer will appear above any other layers, change line 8 to use the url https://gist.github.com/raw/4504864/c9ef880071f959398b7cf0b687d4f37c352ea86d/leaflet-google.js to fix it :)

Thanks Crofty. Map n00b. Totally did not understand why leafletjs wasn't creating map tiles. This worked, no problem, and illustrated interaction between leaflet and gMaps API.

Thanks!

Note that this seems to have been written for Leaflet 0.4.5 (the previous stable version) and below. I get issues with the map freezing when trying to zoom with Leaflet 0.5.1 in place.

Seems leaflet now requires the use of their CDN, so get 403 forbidden.

Simple fix in my fork (https://gist.github.com/abovethewater/5598094).

Hi,
Thanks for this nice plug-in.
Can anyone say me how can I use this for 0.4.5+ versions?
I can't even use it with 0.4.5. It makes map freeze too.

Doesn't work with current Leaflet version or dev version. Need the latest Leaflet for the draw plugin, so can't go back.

Note, if you set zoomAnimation:false on the map object, it seems to behave, mostly. Although there's a bit of weirdness around zooming animation in general

thanks for this. does it involve cost? as we are using google maps?

Very cool. When I zoom in/out, however, my overlay zooms about a full second before the google tiles zoom. Any idea what might be causing this or a simple fix?

I have the same problem as justmytwospence. It renders the Google layer implementation unusable :-/.

Hi Crofty, works for me.. but I need to add some overlays over google base tile and can't do it. Google's overall :S

Thanks for this. If anyone is interested in a demo here is a jsfiddle of the code above: http://jsfiddle.net/bL48E/

Good stuff. Got here via this answer on Stack Overflow. As also mentioned there, the official Leaflet plugins' page references a similar plugin by Pavel Shramov, which gives you access to Google tiles. Note how Pavel's repo contains also several other interesting Leaflet plugins, e.g there are also Bing and Yandex tiles available.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.