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.
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:
The backend would return a list of stores when searched by a store name (this should be pretty easy I guess)
If results are not empty then loop through the list and see if all of them has a lat/lng value associated with.
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.
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({...}).
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.
Related
I've built some web crawlers to gather information about Hijacking Hotspots in South Africa... I've retrieved location information, but its all listed in a vague format, e.g.: "The William Nicol Drive offramp from the N1 from the Sandton side" ... Each location is formatted in JSON format right now.
My Problem:
I want to iterate through a list of all these descriptions/locations and retrieve rough GPS coordinates for each one. Would using the Google API with Javascript be the best option for achieving this? And does anyone have some code examples to demonstrate how I should go about getting this done with Javascript. Please keep in mind that I'm only an intermediate Javascript coder.
I need the quickest most efficient method of getting this done because I'm on a tight deadline and I'll have to use this method for a few other purposes as well.
Sample JSON Data:
{"data":{"area":"Cape Town","location":"Corner of Alice St and Voortrekker Road", "gps":"?"}}
It would be great if you can provide a sample of your JSON response.
The Getting Started page for Maps API have samples that will guide you through the whole process of what you want to develop.
The easiest way to do it is if the JSON response you have have lat/long coordinates. This way, you iterate through the items and place Markers to the map.
If no coordinates are available, but there's a placeId on the response, you can try out the Places API. You'll just need to provide the placeId in PlacesService.getDetails() and the response will contain an object with the lat/long coordinates - which you'll add into the marker.
I'm trying to generate a map that shows multiple store locations, perhaps 30-40. Only 10 are displaying. I understand that Google limits that, unless you provide a Google API key. I have one, but when I pass it in, Google complains ("Google has disabled use of the Maps API for this application"). The key is valid. Also, the jQuery gmap2 docs say the API key is not required. Is there a way around this limitation?
Thanks,
Fellow Overflowers,
Am working in a project in which I need to place (pin) on map (Google in my case), a stream of data. One data record consist of 11 columns and the last 2 ones, are "city" and "country".
The data source is an html page, using the usual table tags, this is a business model and can not be changed. I managed to parse and analyze them using Nokogiri and finally store them in an array.
The idea is to pin each data in the map and ballon the rest of the 9 columns.
The hint: data are refreshed every 1 minute.
I can not figure out the approach: Shall i use arrays or a database to save the data? The average number of records to be displayed is 120 at the same time, on the map.
..and has anybody implemented something similar, could there be a comment regarding the performance?
Thanks a bunch...
Petros
I think you will get problems when geocoding Country, City every minute. Probability you reach limit or encounter some failure is very high. The rest (refreshing with ajax and removing/adding 100+ markers) will be no problem.
So, if I'd do it I would created local database with geocodes (latitude and longitude) for Country+City. I would gather geocodes (that is not present in database) via google.maps.Geocoder right in the javascript and send them back with AJAX to append to the table. I suppose, your country+city database get complete rapidly and you no need to extensive geocoding anymore, also for exceptions you always have geocoder ready in javascript to resolve new city. It should work like a charm.
Alternative is to use static geocoder right in your server side just after you get new portion of data. But I would prefer first approach.
When one visits http://maps.google.com, they are able to type queries into the search field and receive results based on locations or places, and not hard search results, as they would in a normal Google Search query. They're a unique style of result (names of places, locations) suited to the Maps interface for obvious reasons.
I've been digging through both the Maps and standard Google Search API for a couple hours now, and have done multiple searches on this question, and I can't seem to find the answer.
They obviously have the Local Search, but that's been deprecated, and it only yields results if you provide an initial lat/long. I want to be able to find places or locations with no initial lat/long.
Essentially what I want to do is allow a user to type in an address, name of a place or name of a city or state or a zip code, or essentially any other kind of location that is allowable on Maps, and geocode it. I feel stupid because this seems like it has to be there, but nothing I've seen in the API seems to do this.
I don't need the AJAX suggested results, necessarily. Just a way for a user to type in a nice name and geocode from it, though results as a user types would be ideal.
What am I missing here?
What you are looking is Geocoding API from google maps.
Find Documentation here
UPDATE 5/12/2011
Google just opened up public access to their Places API. This is more to the heart of the original question request:
https://developers.google.com/maps/documentation/places/web-service/autocomplete
I think you're looking for the google.maps.Geocoder class:
A service for converting between an address and a LatLng.
My client has a list of store locations. Now what he wants is to let users search for any of these locations, based on the address the user submitted. The search results will be based on the proximity of the locations.
So basically what I am looking for is Google Maps functionality, but based only on the set of (geographical) data I provide.
Do any of you know if this is even possible, and if so, what can be a good starting point to learn more about it?
Thanks in advance.
Sure it is possible. I guess you have in you database set of the latitude and longitude entries for each store. You can get users current location with geocoder and measure distance with distanceFrom call to find the nearest store.
You're welcome to copy the code directly from here, it does exactly what you request.
You'll need offices.htm, offices.js and logo.png.
To prepare your list of offices, you might find this Excel addin useful