Integrating GMaps into Your Java Web Application

qiuye

http://ajaxian.com/archives/integrating-maps-into-your-java-web-application-with-google-maps-and-ajax

 

Integrating Maps into Your Java Web Application with Google Maps and Ajax



John Ferguson Smart has written a nice article on Integrating Maps into Your Java Web Application with Google Maps and Ajax.
The article focuses on the Google Maps API (the only server sidepiece is a simple Servlet), and takes you through learning the API, andthen using more advanced techniques such as dynamic markers, andondemand (via ajax) content inclusion:

 

<div class="syntax_hilite">
<div class="javascript">JAVASCRIPT:   1.          2.         function fetchDetails(id) {   3.            var req = GXmlHttp.create();   4.            req.open("GET", "/maps/SiteDirectory?id="+id, true);   5.            req.onreadystatechange = getCallbackFunction(req, displayDetails);   6.            req.send(null);   7.          }   8.          9.          function displayDetails(siteDetailsXML) {  10.            // Get the root "site" element from the document  11.            var site = siteDetailsXML.getElementsByTagName("site")[0];  12.            var name = getNodeValue(site.getElementsByTagName("name")[0]);  13.            var id = getNodeValue(site.getElementsByTagName("id")[0]);  14.            var symbol = getNodeValue(siteDetailsXML.getElementsByTagName("symbol")[0]);  15.            var website = getNodeValue(siteDetailsXML.getElementsByTagName("website")[0]);  16.            var address = site.getElementsByTagName("address")[0]  17.            var address1 = getNodeValue(siteDetailsXML.getElementsByTagName("line1")[0]);  18.            var address2 = getNodeValue(siteDetailsXML.getElementsByTagName("line2")[0]);  19.            var city = getNodeValue(siteDetailsXML.getElementsByTagName("city")[0]);  20.            var postcode = getNodeValue(siteDetailsXML.getElementsByTagName("postcode")[0]);  21.         22.            marker = getMarker(id);  23.            marker.showMapBlowup();  24.            var html = '<span class="site-title-line">'  25.                    + name + ' (' + symbol + ')'  26.                    +'</span>'  27.                    + '<span class="site-details-line">'  28.                    + address1  29.                    +'</span>'  30.                    + '<span class="site-details-line">'  31.                    + address2  32.                    +'</span>'  33.                    + '<span class="site-details-line">'  34.                    + city + ' ' + postcode  35.                    +'</span>'  36.                    + '<span class="site-details-line">'  37.                    + '<a href="' + website + '">' + website + '</a>'  38.                    +'</span>'  39.             marker.openInfoWindowHtml(html);  40.            }  41.