Skip to content

Instantly share code, notes, and snippets.

@crofty
Last active October 22, 2021 08:24
Show Gist options
  • Save crofty/2197701 to your computer and use it in GitHub Desktop.
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>
@dzackgarza
Copy link

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

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

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

@boriskogan81
Copy link

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

Thanks!!!!!!!!

@agazslee
Copy link

agazslee commented May 8, 2018

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

@kojikojikojikoji
Copy link

It doesn't work well

@bernhardreiter
Copy link

bernhardreiter commented Aug 23, 2019

@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

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