Skip to content
Create a gist now

Instantly share code, notes, and snippets.

@crofty /index.html
Last active May 11, 2016

A example of using Google Map tiles with the Leaflet mapping library - http://matchingnotes.com/using-google-map-tiles-with-leaflet
<!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>
@brak59
brak59 commented Mar 29, 2012

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

@bencevans

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

@JohnShannonPerkins

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!

@davidcalhoun

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.

@abovethewater

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

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

@cihadturhan

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.

@RRSprinkhuizen

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

@tcql
tcql commented Jul 8, 2013

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

@mmohando
mmohando commented Aug 8, 2013

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

@dhirajt
dhirajt commented Sep 13, 2013

Cool +1

@justmytwospence

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?

@CodeZombieCH

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

@fedegonzal

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

@bmchild
bmchild commented Jan 29, 2014

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

@lembitk
lembitk commented Apr 7, 2014

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.

@emamut
emamut commented Mar 6, 2015

What a great job, Crofty

@booherbg

Works great for me in leaflet 0.7.3 -- straight from the example.

@JatGitHub

Would love to see a snippet, or page URL

@malre
malre commented Apr 28, 2015

.

@mineroot

Works good in last stable version. But there is available source for Leaflet 1.0 dev for working with Google Maps and Yandex Maps?

SOLUTION

Google, Yandex, Bing Maps Tiles for Leaflet 0.8 (on 1.0 works fine too)

@raghuxius

This example works good in Mozilla Firefox browser but when we try to use the IE or Chrome browser it throws an error at "var googleLayer = new L.Google('ROADMAP');" and it states that an object is expected here. Please can any one help in addressing this.

@r-barnes

Also having an issue with that.

@sijangurung

Thanks for the fantastic layer !
just what i needed ..
also please correct on line 16

@kudko
kudko commented Oct 1, 2015

Can anyone, please, explain why does the map script goes after the map div and not in the body section? As soon as I place it in the body, the map stops working.
PS. Works fine in leaflet 0.7.5

@SamEureka

+1 Thanks!

@RHenningsgard

Maybe a dumb question, but what about Google's API key and all? How is Leaflet getting authorized for the use of the Google tiles?

@aecavac
aecavac commented Apr 5, 2016

As described here developer should get js file with api key : https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY

@Jayant369963

For some reason, leaflet is not rendering the Google map tile layers, did anyone face the similar issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.