-
-
Save crofty/2197701 to your computer and use it in GitHub Desktop.
| <!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> |
.
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)
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.
Also having an issue with that.
Thanks for the fantastic layer !
just what i needed ..
also please correct on line 16
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
+1 Thanks!
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?
As described here developer should get js file with api key : https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
For some reason, leaflet is not rendering the Google map tile layers, did anyone face the similar issue?
@jayant yeah I'm having the exact same issue
@Jayant369963, see this plagin -> https://github.com/shramov/leaflet-plugins
@crofty Its not working with mobile app plz reply
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.
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); 
https://gist.github.com/harshvb7/e30565b279823633605eaab3205134cf
I fixed your dragging issue
I merge all maps so: https://all-maps.herokuapp.com/
Gives me an error
129:17 error 'google' is not defined no-undef
Why?
@RHenningsgard Did you find a solution for Google "terms of use," and "Report a map error" dead links?
i guess it has a problem with new versions
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.
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.
Awesome work Crofty! Very useful, Thank you so much.
Crofty, this is great, but my Hybrid layer is not showing any street or place names. Any idea what might be causing this?
Thanks!!!!!!!!
how can i change latlng with function? can any one help.
It doesn't work well
@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.)
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.
Would love to see a snippet, or page URL