GOOGLE API - How to search informations with Google Maps API (1/3)
There are no geographical localisation search function from postal address in Google Maps API. If we haven't latitude and longitude of the points, it will be difficult for users to search informations for every documents.
If I use Google Maps and Google Earth it's I want :
- to find all documents in a region
- to find where is the site referenced by the document
To find the position of a document the user need to zoom on the by clicking on this document in a list for example. With Google Earth there is no problem. The list of document appears in left pannel. We juste have to double click on the title of a document to be centered and zoomed on the site referenced by the document. Unfortunately you haven't this option with Google Maps.
How to find, center and zoom on Google Maps with a postal address
To find geolocalisation of a postal address I use web service localsearchmap. This web service return by default the Google Maps API syntax to center and zoom on this point. Unfortunately, it uses the version 1 of the API syntax who's not compatible with the actual version. The web service permiss to custumize the format of the response.The basic syntaxe to call this service is :
http://www.localsearchmaps.com/geo/?street=mystreet&town=mytown
&country=mycountry
It's possible to add an argument to return the result with call to Javascript function : &cb=myJavascriptFonction
For example :
http://www.localsearchmaps.com/geo/
?street=rue+des+cosmonautes&town=palaiseau
&country=france&cb=mapZoom
return the result : mapZoom(46.624, 2.4622);
To use map object in Javascript function I must declare this object as global in the javascript code who display Google Maps map (previous entry).
The search form
The user needs to specify postal address in a form. We must add three fields and a button in the Google Maps page : street, town, coutry fields and search button.
mapZoom(lat,long) Javascript function<FORM NAME="form">
<LABEL>Street : </LABEL> <INPUT NAME="street" SIZE=50 /><BR />
<LABEL>Town : </LABEL> <INPUT NAME="town" SIZE=50 /><BR />
<LABEL>Country : </LABEL> <INPUT NAME="country" />
<BUTTON VALUE="Search" NAME="Search" TYPE="button"
onclick="searchPoint()">
Search
</BUTTON>
</FORM>
When we'll have found the geolocalisation of the point, we must center and zoom on the point. Then I declare a new Javascript function to do that :
function mapZoom(lat, long,town,state,country){
var point = new GLatLng( parseFloat(lat), parseFloat(long));
map.setCenter(point,14, G_HYBRID_MAP );
}searchPoint() Javascript functionThis function call web service with datas of the form in argument. The result will launch the previous function to zoom and center on the point.
function searchPoint() {
var queries = "?street=" + escape( document.form.street.value)+
"&city="+escape( document.form.town.value)+
"&country=" + escape( document.form.country.value);
var s = document.createElement( "script" );
s.src="http://www.localsearchmaps.com/geo/" + queries + "&cb=mapZoom";
s.type = "text/javascript";
document.getElementsByTagName( "head" )[0].appendChild(s);
}This example (in french for the moment) shows you the result.
Version française





0 comments:
Post a Comment