Friday, October 27th, 2006

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

Category: Articles, Google, Mapping

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

Related Content:

Posted by Dion Almaer at 9:24 am
3 Comments

++++-
4 rating from 22 votes

3 Comments »

Comments feed TrackBack URI

OK, so what does this have to do with Java? This can be done with any web progrgamming language. This can all be done with a web programming language some JavaScript and the Google Maps API.

Comment by CJ — October 28, 2006

[...] AJAX enabled mapping applications are popping out all over. GoogleMapsMania has the definitive collection of mapping mashups. Throw in Web 2.0 technologies like the Hive 7 virtual environment. An open source database might be developed with Web 2.0 tools. Writely, a free, Web-based word-processing program, allows real-time collaboration on documents. [...]

Pingback by dailywireless.org » Bird Flu Mashup — November 9, 2006

very good, could u help me where can i found a website of Ajax document?
thnx

Comment by kevin — July 14, 2007

Leave a comment

You must be logged in to post a comment.