Skip to content

Instantly share code, notes, and snippets.

@crofty

crofty/index.html

Last active October 1, 2025 21:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save crofty/2197701 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save crofty/2197701 to your computer and use it in GitHub Desktop.
Download ZIP
A example of using Google Map tiles with the Leaflet mapping library - http://matchingnotes.com/using-google-map-tiles-with-leaflet
Raw
index.html
<!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>
@raghuxius

raghuxius commented Jul 8, 2015

Copy link
Copy Markdown

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

r-barnes commented Jul 17, 2015

Copy link
Copy Markdown

Also having an issue with that.

@sijangurung

sijangurung commented Sep 28, 2015

Copy link
Copy Markdown

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

@kudko

kudko commented Oct 1, 2015

Copy link
Copy Markdown

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

SamEureka commented Feb 2, 2016

Copy link
Copy Markdown

+1 Thanks!

@RHenningsgard

RHenningsgard commented Mar 29, 2016

Copy link
Copy Markdown

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

Copy link
Copy Markdown

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

@Jayant369963

Jayant369963 commented May 11, 2016

Copy link
Copy Markdown

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

@avramesh17

avramesh17 commented Jul 8, 2016

Copy link
Copy Markdown

@jayant yeah I'm having the exact same issue

@rajiv13531

rajiv13531 commented Jul 24, 2016

Copy link
Copy Markdown

@crofty Its not working with mobile app plz reply

@RHenningsgard

RHenningsgard commented Aug 4, 2016

Copy link
Copy Markdown

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

AppWerft commented Nov 10, 2016 •
edited
Loading

Copy link
Copy Markdown

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

harshvb7 commented Dec 8, 2016

Copy link
Copy Markdown

@AppWerft

https://gist.github.com/harshvb7/e30565b279823633605eaab3205134cf

I fixed your dragging issue

ghost commented May 24, 2017

Copy link
Copy Markdown

Gives me an error

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

Why?

@vasileboris

vasileboris commented Jun 13, 2017

Copy link
Copy Markdown

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

@yeganehaym

yeganehaym commented Jul 6, 2017

Copy link
Copy Markdown

i guess it has a problem with new versions

@dzackgarza

dzackgarza commented Jul 13, 2017

Copy link
Copy Markdown

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

yogesh4cats commented Sep 28, 2017

Copy link
Copy Markdown

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

sw-ms-surendrasinhrathod commented Oct 10, 2017

Copy link
Copy Markdown

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

@boriskogan81

boriskogan81 commented Dec 20, 2017

Copy link
Copy Markdown

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

@AndersonSchmidt

AndersonSchmidt commented Jan 19, 2018

Copy link
Copy Markdown

Thanks!!!!!!!!

@agazslee

agazslee commented May 8, 2018

Copy link
Copy Markdown

how can i change latlng with function? can any one help.

@kojikojikojikoji

kojikojikojikoji commented Sep 11, 2018

Copy link
Copy Markdown

It doesn't work well

@bernhardreiter

bernhardreiter commented Aug 23, 2019 •
edited
Loading

Copy link
Copy Markdown

@crofty What is the license on the code that was available from http://matchingnotes.com/using-google-map-tiles-with-leaflet
(the url does not work, as checked 2019-08-26). There is an archived version of the page at https://web.archive.org/web/20180728014324/http://matchingnotes.com/using-google-map-tiles-with-leaflet

Okay, the code behind http://matchingnotes.com/javascripts/leaflet-google.js seems still be available at https://gist.github.com/crofty/2197701

The code is non-trivial, so it will be copyrightable. Without explicit licensing there is no permission for others to use the code.

Did somebody else see an explicit or implicit hint about who is the copryight holder and how this person wants the code to be used?
(Implicitely putting it up as example of gist.github.com by croft does not clarify the two points.)

@bernhardreiter

bernhardreiter commented Aug 26, 2019

Copy link
Copy Markdown

Followup on the licensing status of leaflet-google.js see https://gist.github.com/crofty/2197042#gistcomment-3008148, it's copyright @shramov and probably Free Software under MIT.

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