Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

This comment has been minimized.

Show comment Hide comment
@brak59

brak59 Mar 29, 2012

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

brak59 commented Mar 29, 2012

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

@bencevans

This comment has been minimized.

Show comment Hide comment
@bencevans

bencevans Jan 10, 2013

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! 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

This comment has been minimized.

Show comment Hide comment
@JohnShannonPerkins

JohnShannonPerkins Mar 6, 2013

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!

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

This comment has been minimized.

Show comment Hide comment
@davidcalhoun

davidcalhoun Mar 31, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@abovethewater

abovethewater May 17, 2013

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

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

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

This comment has been minimized.

Show comment Hide comment
@cihadturhan

cihadturhan Jun 6, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@RRSprinkhuizen

RRSprinkhuizen Jun 14, 2013

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

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

@tcql

This comment has been minimized.

Show comment Hide comment
@tcql

tcql 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

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

This comment has been minimized.

Show comment Hide comment
@mmohando

mmohando Aug 8, 2013

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

mmohando commented Aug 8, 2013

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

@dhirajt

This comment has been minimized.

Show comment Hide comment
@dhirajt

dhirajt Sep 13, 2013

Cool +1

dhirajt commented Sep 13, 2013

Cool +1

@justmytwospence

This comment has been minimized.

Show comment Hide comment
@justmytwospence

justmytwospence Nov 12, 2013

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?

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

This comment has been minimized.

Show comment Hide comment
@CodeZombieCH

CodeZombieCH Jan 20, 2014

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

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

@fedegonzal

This comment has been minimized.

Show comment Hide comment
@fedegonzal

fedegonzal Jan 22, 2014

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

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

This comment has been minimized.

Show comment Hide comment
@bmchild

bmchild 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/

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

This comment has been minimized.

Show comment Hide comment
@lembitk

lembitk 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.

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

This comment has been minimized.

Show comment Hide comment
@emamut

emamut Mar 6, 2015

What a great job, Crofty

emamut commented Mar 6, 2015

What a great job, Crofty

@booherbg

This comment has been minimized.

Show comment Hide comment
@booherbg

booherbg Mar 13, 2015

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

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

@JatGitHub

This comment has been minimized.

Show comment Hide comment
@JatGitHub

JatGitHub Apr 7, 2015

Would love to see a snippet, or page URL

Would love to see a snippet, or page URL

@malre

This comment has been minimized.

Show comment Hide comment
@malre

malre Apr 28, 2015

.

malre commented Apr 28, 2015

.

@mineroot

This comment has been minimized.

Show comment Hide comment
@mineroot

mineroot Jun 12, 2015

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)

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 comment has been minimized.

Show comment Hide comment
@raghuxius

raghuxius Jul 8, 2015

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.

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

This comment has been minimized.

Show comment Hide comment
@r-barnes

r-barnes Jul 17, 2015

Also having an issue with that.

Also having an issue with that.

@sijangurung

This comment has been minimized.

Show comment Hide comment
@sijangurung

sijangurung Sep 28, 2015

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

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

@kudko

This comment has been minimized.

Show comment Hide comment
@kudko

kudko 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

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

This comment has been minimized.

Show comment Hide comment
@SamEureka

SamEureka Feb 2, 2016

+1 Thanks!

+1 Thanks!

@RHenningsgard

This comment has been minimized.

Show comment Hide comment
@RHenningsgard

RHenningsgard Mar 29, 2016

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?

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

This comment has been minimized.

Show comment Hide comment
@aecavac

aecavac 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

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

This comment has been minimized.

Show comment Hide comment
@Jayant369963

Jayant369963 May 11, 2016

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

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

@avramesh17

This comment has been minimized.

Show comment Hide comment
@avramesh17

avramesh17 Jul 8, 2016

@jayant yeah I'm having the exact same issue

@jayant yeah I'm having the exact same issue

@artamonovdev

This comment has been minimized.

Show comment Hide comment
@rajiv13531

This comment has been minimized.

Show comment Hide comment
@rajiv13531

rajiv13531 Jul 24, 2016

@crofty Its not working with mobile app plz reply

@crofty Its not working with mobile app plz reply

@RHenningsgard

This comment has been minimized.

Show comment Hide comment
@RHenningsgard

RHenningsgard Aug 4, 2016

I'm having a (hopefully) minor problem: I am using the version of leaflet-google.js available at...

https://gist.github.com/raw/4504864/c9ef880071f959398b7cf0b687d4f37c352ea86d/leaflet-google.js

...(although the github mime type is wrong - text - , so I had to download the text of leaflet-google.js and serve it on my own server).

My problem is that the Google "terms of use," and "Report a map error" links are dead, and the "Report a map error" link is overwritten by a "Leaflet" link anchor which is live, and links to leafletjs.com. That's a violation of Google's terms of use which I can't permit on my site. See the attached JPG for an example.

I have not dug into this yet, but if anybody has a solution, I'm all ears.
leafletproblem

I'm having a (hopefully) minor problem: I am using the version of leaflet-google.js available at...

https://gist.github.com/raw/4504864/c9ef880071f959398b7cf0b687d4f37c352ea86d/leaflet-google.js

...(although the github mime type is wrong - text - , so I had to download the text of leaflet-google.js and serve it on my own server).

My problem is that the Google "terms of use," and "Report a map error" links are dead, and the "Report a map error" link is overwritten by a "Leaflet" link anchor which is live, and links to leafletjs.com. That's a violation of Google's terms of use which I can't permit on my site. See the attached JPG for an example.

I have not dug into this yet, but if anybody has a solution, I'm all ears.
leafletproblem

@AppWerft

This comment has been minimized.

Show comment Hide comment
@AppWerft

AppWerft Nov 10, 2016

Great work. I tried to add google styles. Here my gist: https://gist.github.com/AppWerft/24a999070216f229ff8a6d18107944a4
Issue: the dragging doesn't work. Any idea? How can I fix?

googleLayer = new L.Google('ROADMAP', {},GLOBALS.STYLES);
heatmapLayer = L.heatLayer(pointsInHeatmap, {
	radius: 2,
	gradient : {0.4: color,  1: color},
	minOpacity : 1,
	blur : 0.001,
});
map = new L.Map('map', {
	center: new L.LatLng(50.5, 10), 
	zoom: 6
});
map.addLayer(googleLayer);	
map.addLayer(heatmapLayer);	

AppWerft commented Nov 10, 2016

Great work. I tried to add google styles. Here my gist: https://gist.github.com/AppWerft/24a999070216f229ff8a6d18107944a4
Issue: the dragging doesn't work. Any idea? How can I fix?

googleLayer = new L.Google('ROADMAP', {},GLOBALS.STYLES);
heatmapLayer = L.heatLayer(pointsInHeatmap, {
	radius: 2,
	gradient : {0.4: color,  1: color},
	minOpacity : 1,
	blur : 0.001,
});
map = new L.Map('map', {
	center: new L.LatLng(50.5, 10), 
	zoom: 6
});
map.addLayer(googleLayer);	
map.addLayer(heatmapLayer);	
@harshvb7

This comment has been minimized.

Show comment Hide comment
@artamonovdev

This comment has been minimized.

Show comment Hide comment

artamonovdev commented Feb 24, 2017

@ghost

This comment has been minimized.

Show comment Hide comment
@ghost

ghost May 24, 2017

Gives me an error

129:17 error 'google' is not defined no-undef

Why?

ghost commented May 24, 2017

Gives me an error

129:17 error 'google' is not defined no-undef

Why?

@vasileboris

This comment has been minimized.

Show comment Hide comment
@vasileboris

vasileboris Jun 13, 2017

@RHenningsgard Did you find a solution for Google "terms of use," and "Report a map error" dead links?

@RHenningsgard Did you find a solution for Google "terms of use," and "Report a map error" dead links?

@yeganehaym

This comment has been minimized.

Show comment Hide comment
@yeganehaym

yeganehaym Jul 6, 2017

i guess it has a problem with new versions

i guess it has a problem with new versions

@dzackgarza

This comment has been minimized.

Show comment Hide comment
@dzackgarza

dzackgarza Jul 13, 2017

Heads up, this doesn't actually add tiles to the leaflet map - it overlays a different, separate Google map over the current one. So plugins that rely on having those tiles accessible actually won't work.

Heads up, this doesn't actually add tiles to the leaflet map - it overlays a different, separate Google map over the current one. So plugins that rely on having those tiles accessible actually won't work.

@yogesh4cats

This comment has been minimized.

Show comment Hide comment
@yogesh4cats

yogesh4cats Sep 28, 2017

Hi @crofty, @bencevans and @harshvb7
Thank you all of you. By the way I guess harshvb7's code should be merged with bencevans to remove overlay issue.

Hi @crofty, @bencevans and @harshvb7
Thank you all of you. By the way I guess harshvb7's code should be merged with bencevans to remove overlay issue.

@sw-ms-surendrasinhrathod

This comment has been minimized.

Show comment Hide comment
@sw-ms-surendrasinhrathod

sw-ms-surendrasinhrathod Oct 10, 2017

Awesome work Crofty! Very useful, Thank you so much.

Awesome work Crofty! Very useful, Thank you so much.

@boriskogan81

This comment has been minimized.

Show comment Hide comment
@boriskogan81

boriskogan81 Dec 20, 2017

Crofty, this is great, but my Hybrid layer is not showing any street or place names. Any idea what might be causing this?

Crofty, this is great, but my Hybrid layer is not showing any street or place names. Any idea what might be causing this?

@AndersonSchmidt

This comment has been minimized.

Show comment Hide comment
@AndersonSchmidt

AndersonSchmidt Jan 19, 2018

Thanks!!!!!!!!

Thanks!!!!!!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment