I have a requirement and I am hoping Google Maps API will have a solution. I have never used Google Maps API - so I am very new to this.
On the website homepage there is a form, when a user comes, I want the following things to happen:
1) The city field should be populated with users city based on IP
2) There is a second field called store name - when the user starts typing the store name - I want to fetch all business listings with that name in that city and show it as a drop down from which the user can select the appropriate branch. There is no need for anything to be shown on the map. Egs - If a user in houston starts typing McDonalds, the following business listings should start showing up
- McDonalds, 12 Pearland Ave, Houston TX
- McDonalds, 2600 Bary Area Blvd, Houston TX
- McDonalds, 262 Clearlake Blvd, Houston TX
Also when we get the address for a business listing from Go开发者_运维问答ogle API - do we get it as one String and we need to parse it or do we get it different fields Street Name, City, State, Zip code etc
Any information or examples will be really appreciated Thanks
I don't think you want Google Maps. First of all the terms of use do not allow any use other than displaying things on a Google Map on a publicly accessible webpage, second, there is another Google API that does exactly what you need: the Client location API: http://code.google.com/apis/ajax/documentation/#ClientLocation
Concerning the "businesses": You're going to have to source that data from somewhere - I do not believe google has a service for that. Perhaps you could simply use the Google Search API and some logic to find only businesses (http://code.google.com/apis/ajaxsearch/)
EDIT: I for the businesses, perhaps you could take a look at this sample: http://code.google.com/apis/ajaxsearch/samples.html#local-search
updated: here is an example of using the google clientlocation api and localsearch using jsonp.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAALDWeTDQHOJCbCf0JnUqL8BT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQA7AE8xB9MyWgHECPY2qimOp7BUQ"></script>
<script src="scripts/clientLocation.js" type="text/javascript"></script>
<script src="scripts/localSearch.js" type="text/javascript"></script>
<script type="text/javascript">
function $g(id) {
return document.getElementById(id);
}
function displayLocation(latitudeEl, longitudeEl, cityEl, regionEl, countryEl, country_codeEl) {
var cloc = new ClientLocation.Location(google.loader.ClientLocation);
if (latitudeEl) latitudeEl.innerHTML = cloc.latitude;
if (longitudeEl) longitudeEl.innerHTML = cloc.longitude;
if (cityEl) cityEl.innerHTML = cloc.address.city;
if (regionEl) regionEl.innerHTML = cloc.address.region;
if (country) country.innerHTML = cloc.address.country;
if (country_codeEl) country_codeEl.innerHTML = cloc.address.country_code;
}
function localSearch(term, callback, context) {
var cloc = new ClientLocation.Location(google.loader.ClientLocation);
var searchUrl = 'http://www.google.com/uds/GlocalSearch?callback=' + callback + '&context=' + context + '&hl=en&q=' + encodeURIComponent(term) + '&sll=' + cloc.latitude + ',' + cloc.longitude + '&key=ABQIAAAALDWeTDQHOJCbCf0JnUqL8BT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQA7AE8xB9MyWgHECPY2qimOp7BUQ&v=1.0';
// http://jaybyjayfresh.com/2007/09/17/using-script-tags-to-do-remote-http-calls-in-javascript/
scriptLoaded = function() {
removeNode(newScript);
};
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.onload = scriptLoaded;
newScript.src = searchUrl;
headID.appendChild(newScript);
}
function search() {
var term = $g("txtSearch").value;
localSearch(term, "displayResults", "0");
}
function displayResults(context, results, status, details, unused) {
var titles = [];
for (var i = 0; i < results.results.length; i++) {
// this cast is not necessary, just here to illustrate
// vs intellisense and reduce coding errors.
var result = new LocalSearch.Result(results.results[i]);
titles.push(result.title);
}
$g("searchResults").innerHTML = titles.join("</br>");
}
function init() {
displayLocation($g("latitude"), $g("longitude"), $g("city"), $g("region"), $g("country"), $g("country_code"));
}
</script>
</head>
<body onload="init()">
<form id="form1" runat="server">
<div>
latitude : <span id="latitude"></span>
<br />
longitude : <span id="longitude"></span>
<br />
city : <span id="city"></span>
<br />
region : <span id="region"></span>
<br />
country : <span id="country"></span>
<br />
country_code : <span id="country_code"></span>
<br />
</div>
<input type="text" id="txtSearch" /><input type="button" id="btnSearch" value="get results"
onclick="search();" /><br />
<div id="searchResults">
</div>
</form>
</body>
</html>
// <copyright file="clientLocation.js" company="Sky Sanders">
// This source is placed in the Public Domain.
// http://skysanders.net/subtext
// Attribution is appreciated.
// </copyright>
/*
object literal format for google.loader.clientlocation
{
"latitude": 33.324,
"longitude": -111.867,
"address": {
"city": "Chandler",
"region": "AZ",
"country": "USA",
"country_code": "US"
}
}
*/
var ClientLocation = {};
ClientLocation.Address = function() {
/// <field name="city" type="String" />
/// <field name="region" type="String" />
/// <field name="country" type="String" />
/// <field name="country_code" type="String" />
/// <returns type="ClientLocation.Address"/>
if (arguments.length > 0) {
this.city = arguments[0].city;
this.region = arguments[0].region;
this.country = arguments[0].country;
this.country_code = arguments[0].country_code;
return;
}
else {
this.city = "";
this.region = "";
this.country = "";
this.country_code = "";
}
}
ClientLocation.Location = function() {
/// <field name="latitude" type="Number" />
/// <field name="longitude" type="Number" />
/// <field name="address" type="ClientLocation.Address" />
if (arguments.length > 0) {
this.latitude = arguments[0].latitude;
this.longitude = arguments[0].longitude;
this.address = arguments[0].address;
}
else {
this.latitude = 0;
this.longitude = 0;
this.address = undefined;
}
}
// <copyright file="localSearc.js" company="Sky Sanders">
// This source is placed in the Public Domain.
// http://skysanders.net/subtext
// Attribution is appreciated.
// </copyright>
/*
GlocalSearch result
{
"GsearchResultClass": "GlocalSearch",
"viewportmode": "computed",
"listingType": "local",
"lat": "33.389689",
"lng": "-111.853909",
"accuracy": "8",
"title": "Best \u003cb\u003eBuy\u003c/b\u003e",
"titleNoFormatting": "Best Buy",
"ddUrl": "http://www.google.com/maps....",
"ddUrlToHere": "http://www.google.com/maps?....",
"ddUrlFromHere": "http://www.google.com/maps?....",
"streetAddress": "1337 South Alma School Road",
"city": "Mesa",
"region": "AZ",
"country": "United States",
"staticMapUrl": "http://mt.google.com/mapdata?....",
"url": "http://www.google.com/maps/place?source....",
"content": "",
"maxAge": 604800,
"phoneNumbers": [{
"type": "",
"number": "(480) 644-7139"
},
{
"type": "",
"number": "(480) 464-0444"
}],
"addressLines": ["1337 South Alma School Road", "Mesa, AZ"]
}
*/
var LocalSearch = {};
LocalSearch.PhoneNumber = function() {
/// <field name="type" type="String"/>
/// <field name="number" type="String"/>
/// <returns type="LocalSearch.PhoneNumber"/>
if (arguments.length > 0) {
this.type = arguments[0].type;
this.number = arguments[0].number;
}
else {
this.type = "";
this.number = "";
}
}
LocalSearch.Result = function() {
/// <field name="GsearchResultClass" type="String"/>
/// <field name="viewportmode" type="String"/>
/// <field name="listingType" type="String"/>
/// <field name="lat" type="String"/>
/// <field name="lng" type="String"/>
/// <field name="accuracy" type="String"/>
/// <field name="title" type="String"/>
/// <field name="titleNoFormatting" type="String"/>
/// <field name="ddUrl" type="String"/>
/// <field name="ddUrlToHere" type="String"/>
/// <field name="ddUrlFromHere" type="String"/>
/// <field name="streetAddress" type="String"/>
/// <field name="city" type="String"/>
/// <field name="region" type="String"/>
/// <field name="country" type="String"/>
/// <field name="staticMapUrl" type="String"/>
/// <field name="url" type="String"/>
/// <field name="content" type="String"/>
/// <field name="maxAge" type="Number"/>
/// <field name="phoneNumbers" type="Array"/>
/// <field name="addressLines" type="Array"/>
// <returns type="LocalSearch.Result"/>
if (arguments.length > 0) {
this.GsearchResultClass = arguments[0].GsearchResultClass;
this.viewportmode = arguments[0].viewportmode;
this.listingType = arguments[0].listingType;
this.lat = arguments[0].lat;
this.lng = arguments[0].lng;
this.accuracy = arguments[0].accuracy;
this.title = arguments[0].title;
this.titleNoFormatting = arguments[0].titleNoFormatting;
this.ddUrl = arguments[0].ddUrl;
this.ddUrlToHere = arguments[0].ddUrlToHere;
this.ddUrlFromHere = arguments[0].ddUrlFromHere;
this.streetAddress = arguments[0].streetAddress;
this.city = arguments[0].city;
this.region = arguments[0].region;
this.country = arguments[0].country;
this.staticMapUrl = arguments[0].staticMapUrl;
this.url = arguments[0].url;
this.content = arguments[0].content;
this.maxAge = arguments[0].maxAge;
this.phoneNumbers = arguments[0].phoneNumbers;
this.addressLines = arguments[0].addressLines;
}
else {
this.GsearchResultClass = "";
this.viewportmode = "";
this.listingType = "";
this.lat = "";
this.lng = "";
this.accuracy = "";
this.title = "";
this.titleNoFormatting = "";
this.ddUrl = "";
this.ddUrlToHere = "";
this.ddUrlFromHere = "";
this.streetAddress = "";
this.city = "";
this.region = "";
this.country = "";
this.staticMapUrl = "";
this.url = "";
this.content = "";
this.maxAge = 0;
this.phoneNumbers = [];
this.addressLines = [];
}
}
If you're only looking up restaurants, try using Yelp's API. You can search for a business by its name within a search radius. Their API is also simpler and easier to use than google's.
http://www.yelp.com/developers/documentation/search_api
精彩评论