Integrating GMaps into Your Java Web Application

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

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 side piece is a simple Servlet), and takes you through learning the API, and then using more advanced techniques such as dynamic markers, and ondemand (via ajax) content inclusion:

 

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.