I am using the new google maps system and an embedded iframe to add my google map into my page with my custom locations.
What I am missing is a way to have a user search their address to see which location is nearest them.
The map lists local Disc Golf courses and I would like to incorporate a search bar that allows you to put in your address so you can see how close you live to the nearest course.
Any idea on how to accomplish this?
Here is my current iFrame code:
<iframe src="https://mapsengine.google.com/map/u/0/embed?mid=zgauQ93-BexQ.kryT1881iie4" width="640" height="480"></iframe>
Displayed on the site:
http://atxdiscgolf.com/
As you can see... no search bar! I want to be able to search addresses on this map so I can see how close they are to home! Please let me know!
Also let me know if you have any Disc Golf courses to add to my list!
I figured out how to do it!
First, I used the "sample code" found here:
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=fr
Then I read about KML layers so...
https://developers.google.com/maps/documentation/javascript/examples/layer-kml
I went to My Maps, clicked export as KML, checked to update when my map updates then directed the KML to the file location that I downloaded the KML file from from My Maps.
It worked! I have a searchable map with my custom overlay embedded!!
It won't let me post more than 2 links so I will post the link to my fiddle in the comments below:
Check out the sample code in the documentation. It adds a search box to the map, which is what it sounds like you're looking for. If you want to be able to get directions or calculate distances, you may have to use other libraries/apis, though Google Maps v3 does already have a lot of the methods already (like computeDistanceBetween).
Related
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 have created a map using the Google Maps API v3.
I have created a Fusion Table with a hundred locations (markers) or so and have that successfully pulling into my map.
Now I need to add a search box to this page that will allow the user to enter their zip code and have the map zoom in to that area, then only seeing the locations in that zip code or the nearest locations to that zip code. I would also like the location data to pull into a sidebar as seen with the now deprecated Local Search API.
I have read most (if not all) of the posts that seemed to be about this, but to no luck. I feel like this shouldn't be that difficult really, I mean Google does search primarily right? Yet adding a search bar to my custom map is such a difficult task.
Any help would be appreciated, I have a deadline of tomorrow. Thanks everyone, I love it here.
Ryan
You will need to geocode the zip code and use the results to center the map, then show the markers that fit the bounds of the map if they are not already shown.
See http://code.google.com/apis/maps/documentation/javascript/geocoding.html
There is an example with a search box.
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.
Well i want to upgrade contact page with dynamic map showing location and give oportunity to calculate route for comapny headquatters. Id it necessery for such simple task use Google api? i mean here generating akey etc? Fo i have any other alternatives to google maps?
There's really no reason to mess with the API at all unless you need to customize the appearance or behavior of gmaps. Why not just use an iframe with a url of:
http://maps.google.com/?q=[you-url-encoded-address-here]
or better yet, set up a textbox and a 'get directions' button to redirect that frame to:
http://maps.google.com/maps?saddr=[their-address]&daddr=[your-address]
edit: this works well in modal dialog if you don't want the google logo sticking out like a sore thumb in your pageflow
You could probably embed directly with a specific URL that will configure it to have the destination you want.
By the way, well written answers are much more likely to receive useful responses here.
You could consider http://www.openlayers.org/ as an alternative to google maps.
In fact open layers can be used to add a Google map, or an OpenStreetMap map or a Bing map, etc.