Sunday, August 20, 2006

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.

<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>

mapZoom(lat,long) Javascript function
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 function
This 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.

0 comments: