Skip to content

Instantly share code, notes, and snippets.

@crofty
Last active October 1, 2025 21:28
Show Gist options
  • Select an option

  • Save crofty/2197701 to your computer and use it in GitHub Desktop.

Select an option

Save crofty/2197701 to your computer and use it in GitHub Desktop.
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>
@harshvb7

harshvb7 commented Dec 8, 2016

Copy link
Copy Markdown

ghost commented May 24, 2017

Copy link
Copy Markdown

Gives me an error

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

Why?

@vasileboris

Copy link
Copy Markdown

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

@yeganehaym

Copy link
Copy Markdown

i guess it has a problem with new versions

@dzackgarza

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

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

Copy link
Copy Markdown

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

@boriskogan81

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

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

Copy link
Copy Markdown

It doesn't work well

@bernhardreiter

bernhardreiter commented Aug 23, 2019

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

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