I am trying to embed an existing, public Google Map into a website. Specifically this one:
http://goo.gl/maps/cHf2
Of course I could use the iframe embed to achieve this, but I would like a little more control over the map … I imagined being able to pull all the markers from the map and display them as an index next to the map. Kind of like Google already does, but embedded in my page with my own styles and images.
I have been digging through Google, Stack Overflow and the API instructions and couldn’t find any relevant posts. In the GET string of the map on Google we can see this chunk:
&msid=212828439842926497866.0004bfae4da003d8ffd1f&mid=1341413217
I thought in there might be a maps ID and I could use it to query the content of the map through the API? The intention is using Google Maps as a CMS for less technical minded people and not dealing with geo data in our own CMS.
Any help would be greatly appreciated. Maybe I am just missing the forest for the trees.
You can download the kml that specifies the markers in that page and display that on your API based map. This example defaults to displaying it using geoxml3, but you can hide that and display the KmlLayer version.
You should be able to just point KmlLayer to the link (I downloaded the kml and put it on my server so it would work with geoxml3).
Here is an example (taken directly from the documentation) that does that
here is the original
I've been wondering about this for some time:
Is it possible to let a custom marker for a place on a google map display an infowindow with the same information that the infowindows on maps.google.com display when clicking on a place, without having to generate the HTML for the content yourself (using the places library)? I hope you know what I mean. Please let me know if I'm being unclear.
It would be great if one could pull the information straight from google instead of having to do it manually. I mean, why do something that's already there, right? ;)
Thanks for sharing your thoughts!
edit: I've tried rephrasing my question to make it clearer. I've removed the example code because it was just adding to the confusion. Sorry, English isn't my first language ...
There is currently no API call from Google that will provide the default InfoWindow content for a Lat/Long location.
The only thing google currently provides is some Reverse Geocoding Infomation.
I want to link to google maps at a particular location with a marker on a particular point.
It's easy to link to a location:
http://maps.google.com/?ll=XX.XXXX,XX.XXXX
But how do I drop a marker at that point too? preferably with a bit of my own text but that's just a bonus.
2017 - Google has released documentation on this see new accepted answer: https://stackoverflow.com/a/44477650/359135
In May 2017 Google launched the official Google Maps URLs documentation. The Google Maps URLs introduces universal cross-platform syntax that you can use in your applications.
Have a look at the following document:
https://developers.google.com/maps/documentation/urls/guide
You can use URLs in search, directions, map and street view modes.
For example, to show the marker at specified position you can use the following URL:
https://www.google.com/maps/search/?api=1&query=36.26577,-92.54324
For further details please read aforementioned documentation.
You can also file feature requests for this API in Google issue tracker.
This format works, but it doesn't seem to be an official way of doing so
http://maps.google.com/maps?q=loc:36.26577,-92.54324
Also you may want to take a look at this. They have a few answers and seem to indicate that this is the new method:
http://maps.google.com/maps?&z=10&q=36.26577+-92.54324&ll=36.26577+-92.54324
If you want to include a zoom level, you can use this format:
https://www.google.com/maps/place/40.7028722+-73.9868281/#40.7028722,-73.9868281,15z
will redirect to this link (per 2017.09.21)
https://www.google.com/maps/place/40%C2%B042'10.3%22N+73%C2%B059'12.6%22W/#40.7028722,-73.9868281,15z/data=!4m5!3m4!1s0x0:0x0!8m2!3d40.7028722!4d-73.9868281
This URL format worked like a charm:
http://maps.google.com/maps?&z={INSERT_MAP_ZOOM}&mrt={INSERT_TYPE_OF_SEARCH}&t={INSERT_MAP_TYPE}&q={INSERT_MAP_LAT_COORDINATES}+{INSERT_MAP_LONG_COORDINATES}
Example for Mount Everest:
http://maps.google.com/maps?&z=15&mrt=yp&t=k&q=27.9879012+86.9253141
Full reference here:
https://moz.com/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters
-- EDIT --
Apparently the zoom parameter stopped working, here's the updated format.
Format
https://www.google.com/maps/#?api=1&map_action=map&basemap=satellite¢er={LAT},{LONG}&zoom={ZOOM}
Example
https://www.google.com/maps/#?api=1&map_action=map&basemap=satellite¢er=27.9879012,86.9253141&zoom=14
If working with Basic4Android and looking for an easy fix to the problem, try this it works both Google maps and Openstreet even though OSM creates a bit of a messy result and thanx to [yndolok] for the google marker
GooglemLoc="https://www.google.com/maps/place/"&[Latitude]&"+"&[Longitude]&"/#"&[Latitude]&","&[Longitude]&",15z"
GooglemRute="https://www.google.co.ls/maps/dir/"&[FrmLatt]&","&[FrmLong]&"/"&[ToLatt]&","&[FrmLong]&"/#"&[ScreenX]&","&[ScreenY]&",14z/data=!3m1!4b1!4m2!4m1!3e0?hl=en" 'route ?hl=en
OpenStreetLoc="https://www.openstreetmap.org/#map=16/"&[Latitude]&"/"&[Longitude]&"&layers=N"
OpenStreetRute="https://www.openstreetmap.org/directions?engine=osrm_car&route="&[FrmLatt]&"%2C"&[FrmLong]&"%3B"&[ToLatt]&"%2C"&[ToLong]&"#Map=15/"&[ScreenX]&"/"&[Screeny]&"&layers=N"
2023 update:
I found a very easy way to implement this function.
From google maps, find your POI (point of interest) and click on it.
on left handside opening menu you will see an icon Share and click.
A modal opens and you see a sharing link input box. Next to it you will see Copy link. Go to your url and paste it like;
Drive to our office
Voila, you are done.
I was wondering if there is a way to embed some text on Google Maps. I searched the JS API and came up with some ideas, but I wasn't really satisfied with them.
The situation is that I draw some polygons on the map, and I want to show some numbers in that polygon. I implemented it with infoWindows now, but I want the numbers embedded into the map. It might have something to do with MVCObject or OverlayView, but I wasn't able to figure out how.
Mike Williams made a library that should solve your problem.
Check the Elabel extension for google maps.
I'm wondering if anyone knows whether it is possible to take the content of a Google Maps InfoWindow and place it in an external DIV when the marker on the map is clicked?
I've had a good dig around both the API docs and Google to see if I can find any examples or information relating to this but have had no luck so far. However I've not had a lot of time since I got asked about this one so I have had to skim a bit so it could be that I've missed something but nothing seems to be jumping out at me.
Essentially I'd just like to know if this is indeed possible so that I don't waste anymore time researching something that is currently not possible with Google Maps. However if anyone has any code, examples, or ideas about how to go about doing this then that would be a very much appreciated!
Thanks,
Mark
It's definitely possible. Just add each marker to an array, along with whatever data you want to display. Add a listener to each marker which will access that data when the marker is clicked.
See these questions:
How do I link Google Maps Markers to other elements
How do I highlight markers on hover in Google Maps for a sortable table