GOOGLE API - Full-Text search in Google Maps API (2/3)

The previous entry presented how to find documents placed close to a postal address. I present now how to find the location of a document on the map. To find document in the database, I'll use Lotus Notes Full-Text Search.

AJAX : (Asynchronous JavaScript And XML)
I can't use standard Lotus Notes full-test search without using frames or iframes. The search form is "POSTed". Then the map will be reloaded after each requests. I'll use AJAX and little DHTML to perform my full-text search in asynchronous mode and integer the result without reload the web page. To learn more about AJAX you can read :

• AJAX on Wikipedia
• Ajaxian

How to customize result search view

When users will click on a link in the result view, I want to center and center on Google Map at the position represented by the document. To do that, I reuse the Javascript function "mapZoom". To have more details on this function read the previous post. The hypertext link of the document will look like :
$lt;A HREF="" OnClick="mapZoom(longitude, latitude); return(false);">myLink</A>

To obtain this result :

1. Create a new view "Search"
   
   • First column formula : "<A HREF="" OnClick="mapZoom(" + longitude + ", " + latitude + "); return(false);">" + title + "</A>"
   • Second column formula : description + "<br />"
   • Select view option : "treat view content as HTML"
2. Create form to display search result : "$$SearchTemplateDefault"
   
   • Insert new field named "$$ViewBody"
   
   

The search form and result area

The user needs only one field to type his request and a search button. In html :

<FORM NAME="form_fts">
<LABEL>Texte : </LABEL> <INPUT NAME="req" SIZE=35 />
<BUTTON VALUE="Rechercher" NAME="Rechercher"
TYPE="button"  onClick="searchNotes()">
Rechercher
</BUTTON>
</FORM>

<DIV id="affres" style="overflow:auto; padding:5px; height:100px;"></DIV>

Search and display result with AJAX

The AJAX function use Lotus Notes standard search url to call result web page and display it in the div with id "affres". The url to search query looks like : "search?searchview&query=text from my query field".

function searchNotes(){
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}

xmlhttp.open("GET", "search?searchview&query=" +
             escape( document.form_fts.req.value),true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.getElementById("affres").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null)
}

document.getElementById("idname").innerHTML display result as content of the div with id "idname".