I have a google map with a few markers already on it. When a user clicks a Get Directions button, I'd like a search box with the same functionality as the Google Map's. When users type an address/postcode in it, they get a "directions" button and if clicked on it will calculate and draw the distance between the address you typed in and the closest marker to it. I've had a very good look at the API, especially this page https://developers.google.com/maps/documentation/javascript/places but I couldn't find anything that matches exactly the google search box and its functionalities. Does anybody know if the above is doable?
You can use the Places Search Box as far as implementing something similar to Google Maps. However, from what you've said, rather than Places, you can probably get away with just an input box, unless you actually need Places data. If all you need is to get directions, you'll want to incorporate the Directions API. With the input box as the origin and the nearest marker as the destination, you can then calculate directions.
Related
I've created a map that has the ability to toggle data (markers) and added a search box, but I want to be able to search through my markers like in Google's My Maps, but everything that I've searched for doesn't have this feature and I've clicked just about every link there is on the first two pages and this is the closest I've found, but I'm trying to find (b) and the answer to (b) in this situation is to find any entrees within a certain radius.
This is the search feature that I'm trying to add: Example of Google's My Maps : If I search pancakes, the top results that I get are places that are on the map in which I've mentioned pancakes (instead of any place that serves pancakes).
Everything that I've done so far has been in html/javascript, so if it is possible, please try and stick to those languages.
I'm using Google's Maps API instead of My Maps because I wanted to do some extra toggling with the data that didn't seem possible with My Maps, eg make lower rated restaurants have lower opacity.
Thanks!
First, I have been reviewing some of the different Google Maps API docs, but I've never done much coding with it. I'm trying to build a simple game for kids in which, if the user clicks on a map within a certain distance of a key map point (could be within 1 mile, 100 yards, 5 miles...depending on situation), then the map point becomes visible and a custom message is displayed with it.
Which google maps api calls would enable this to work? How would I embed a hidden point on the map? With the map being rendered on the client, for security, if I could detect the point clicked and send that point via ajax to the server, then the server could send back whether there is a hidden point at that location, that seems like it could work. Or maybe there's a better way.
Can someone point me in the right direction, as to which API calls, and maybe code samples if possible? To summarize, I'm looking for the following functionality:
Track the lat/long coords of any user-clicked point on a google map. Have that click send the coords to my javascript function.
Have hidden points on the map that the user can't see, but either Maps (or at least just my server via ajax) can be aware of.
Ability to display a custom message right next to the clicked spot or hidden point, when needed.
Thanks!
When I understand correctly what you are trying to achieve it's much easier.
Draw a circle and hide the circle by setting the strokeWeight and fillOpacity to 0 . As radius use the allowed distance, as center the LatLng of the point
Although the circle now is not visible, the API will still respond to click-events on the circle, you only have to set a click-listener for the circle and create e.g. a marker at the center of the circle.
Note: a clickable circle will have a different cursor, you must set a unique cursor for the complete map, otherwise the users will be able to find the circle by hovering the map.
Demo: http://jsfiddle.net/doktormolle/0secbwuf/
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.
All the "simple examples" of geocoding load a hard-coded long/lat pair and then, after the map is displayed, they load the arbitrary user-supplied address. Unfortunately for me, this means the hard-coded location always appears first and then the map shifts to the user-supplied address. What I'd like to find out is how to geocode an arbitrary address first, then initialize the map to the location in one step, so that when the map appears on the screen it is already showing the correct location.
I've been unable to deduce how this could be done from the API docs, however. All the examples show "new google.maps.Map()" being called prior to geocoding and it appears you have to already have a location to create the map, so it's impossible to geocode before displaying the map. On the other hand, it seems to me this would be the most common way to use a google map, so surely there's some way to do it?
Is this possible and does anyone have an example they could point to? Thanks!
If I understood you correctly, I created a simple page here
http://jsfiddle.net/4QGKq/1/
There's a hardcoded human readable address in the HTML ("Sardegna")
The geocoder figures out LatLng from Sardegna
Map is created and centered there.
To change the default map center, change the address in the Source HTML panel, not the textbox, then click on the blue "Run" button.
I have a Google map I have created to highlight the location of several support groups by adding my own pins using my maps and embedding this into my website.
Is there a Google widget of any description to allows people to search my custom map and find their nearest support group (or nearest pin).
I have read through the Google maps stuff but cant seem to find anything that meets my requirements.
Any help appreciated.
The map has no clue about which markers or overlays you have put on it. Therefore there are no way you can do what you want using Google Maps directly. You can however do something else.
When you create your markers/overlays and place them on the map you can add them to an array. When you users then enters a location you can search through that array to find the markers that are closest to the location the user has entered. Google Maps API has a method for getting the distance between two latlngs, but you can also use an ordinary Haversine formula for calculating it.
Once you have found the closest markers it is not hard making sure they are the only ones that are shown on the map.