CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3maps
Xavio
Xavio

Reputation: 437

Place Google Maps marker based on search

I'm trying to implement a Google Map. Part one is centering the map to a specific address, which works quite nice.

My next problem is that I have to place a marker for a store on the map, based on a search on the store name. The marker should probably be connected to a search result in order to display a info bubble when clicked. How to get about and do this, I'm totally qlueless about.

google map with result

Upvotes: 0

Views: 1929

Answers (1)

Arnab
Arnab

Reputation: 726

Your steps seem ok to me, I assume that the search for store name goes to your server and you return some result with store names and addresses, then you look that up using Google Geocoding API and fetch the lat/lng coordinates and place the markers on the map, here are the steps that I would probably use:

  • Create a map
  • Center on a specific address
  • Search for a store
  • If the result has geocode associated with it then just use that to place a marker.
  • If the result does not have lat/lng then make a request to Google Geocoding API to get the lat/lng coordinates. After that place the marker, store the received geocode to your database (by using some background Ajax request).

The Google Geocoding API best practices suggest that you should store the geocodes so that you don't have to query each time to Google's servers. In order to do that you will need to modify your backend so that it also stores Geocode along with the store details, and in search result you can return the geocodes if available.

On a side note, you can use GMaps JavaScript library for easy map manipulation.

Update

The above solution works perfectly in your revised scenario. Let me rephrase the flow again:

  1. The backend would return a list of stores when searched by a store name (this should be pretty easy I guess)
  2. If results are not empty then loop through the list and see if all of them has a lat/lng value associated with.
  3. If you do not find a lat/lng value for a record then make a Geocode request to Google's server passing the address of the store (you need to have at least the address of the store else you can't get the lat/lng value from Google) as a parameter. If the record has a lat/lng value then just go ahead and place a marker on the map.
  4. Once you receive the response from Geocode API then go ahead and place a marker on the map using the maps library API as provided. For GMaps it is map.addMarker({...}).
  5. Once all the the requests are complete then you can consider optimizing a bit which was suggested earlier where you can store the received geocodes in your own server, so that you don't have to fetch them again and again.

To implement the above steps you need to have familiarity with the Maps JS library as well as JavaScript and Ajax/JSONP. Remember that all your Geocode requests(JSONP I think) are asynchronous and you should invoke the marker placement code only when the response is available to you (typically inside a callback). The GMaps library examples are very easy and simple to start with. I hope this explanation should be enough to solve your problem and if it helps you then you can consider marking this an answer.

Upvotes: 1

Related Questions