Example 15 - Using XML with Google Maps

This map experiments with using XML capabilities to generate Google Maps. Using this method, developers can use an XML file (or a server side process that generates XML files) to provide the map data, rather than using tags.

Developers may also mix XML and <googlemaps> tags, where the XML could be used to provide the dynamic data and tags provide the more static information (or vice versa). If developers mix both XML and tags, they must remember that the XML will be processed first, then the tags, and ids must be unique both in the XML file and the tags used.

A typical usage of XML and tag mixing would be to have the XML file provide the point elements, then use tags to render the overlays using the points returned. However you use it, we just hope you have fun with it and it helps you to even more easily integrate wonderful Google Maps into your webpages.

XML files used to generate Google Maps within the Google Maps JSP Taglibrary must validate against our DTD, which is located at http://www.lamatek.com/GoogleMaps/dtds/googlemaps.dtd.

Here is the code we used to generate this map. First is the <googlemaps:map> tag:

<googlemaps:map id="map" xml="http://localhost/GoogleMaps/testmap.xml">
</googlemaps:map>
  

Well that's pretty simple, now isn't it? Next is the XML we used. You can also download it here:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE map PUBLIC "-//LAMATEK, Inc.//DTD GoogleMaps JSP Tag Library 1.0//EN" 
	"http://localhost/GoogleMaps/dtds/googlemaps.dtd">
<map height="300" scope="page" type="map" version="2" width="780">
  <key domain="www.lamatek.com" key="xxxxx"/>
  <cluster pathToScript="/GoogleMaps/Clusterer2.js" gridSize="5" maxVisibleMarkers="5" 
  	  markersPerCluster="2">
  	<icon icon="/GoogleMaps/images/g.png" shadow="/GoogleMaps/images/g_shadow.png" 
  	    iconWidth="48" iconHeight="48" shadowWidth="64" shadowHeight="48" anchorX="24" 
  	    anchorY="45" infoWindowAnchorX="24" infoWindowAnchorY="1"/>
  </cluster>
  <point address="74 Connors Lane" city="Elkton" country="US" id="point1" state="MD" 
      zip="21921"/>
  <point address="1226 Forest Parkway" city="West Deptford" country="US" id="point2" 
      state="NJ" zip="08066"/>
  <point id="euro" city="Bridlington" state="East Yorkshire" country="UK" zip="YO153QY"/>
  <marker id="euromarker" point="euro">
  	<infowindow>
  		Good Ol' Bridlington, England!
  	</infowindow>
  </marker>
  <marker id="marker1" point="point1">
    <tabbedInfoWindow display="false">
    	<tab label="Tab One">Tab one contents.</tab>
    	<tab label="Tab Two" content="Tab two contents."></tab>
    </tabbedInfoWindow>
    <event action="dblclick" asynchronous="false" url="/GoogleMaps/example_15.jsp"/>
  </marker>
  <marker id="marker2" point="point2">
    <blowup display="false" maptype="satellite" zoom="1"/>
    <event action="dblclick" asynchronous="false" url="/GoogleMaps/example_15.jsp"/>
  </marker>
  <traffic id="traffic1" point="point1" radius="10" severity="2" type="incident">
    <icon anchorX="50" anchorY="35" icon="/GoogleMaps/images/accident.png" 
        iconHeight="35" iconWidth="100" infoWindowAnchorX="50" infoWindowAnchorY="1"/>
  </traffic>
  <traffic id="traffic2" point="point1" radius="10" severity="2" type="construction">
    <icon anchorX="24" anchorY="48" icon="/GoogleMaps/images/construction.png" 
        iconHeight="48" iconWidth="48" infoWindowAnchorX="24" infoWindowAnchorY="1"/>
  </traffic>
  <box color="#00ff00" id="box1" opacity="0.50" point1="point1" point2="point2" 
      weight="2"/>
  <circle color="#ff0000" id="circle1" opacity="0.50" point="point1" radius="10" 
      weight="2"/>
  <circle color="#ff0000" id="circle2" opacity="0.50" point="point2" radius="10" 
      weight="2"/>
  <polyline color="#0000ff" id="line1" opacity="0.50" pointlist="point1 point2" 
      weight="2"/>
  <wms id="wms1" name="WMS" layers="landsat,gpx,streets" format="image/jpeg" 
    showOnStartup="true"  pathToScript="/GoogleMaps/wms2.js" showOverlay="true"
    url="http://tile.openstreetmap.org/cgi-bin/steve/mapserv?map=/usr/lib/cgi-bin/steve/wms.map"/>
  <imageoverlay id="image_1" url="/GoogleMaps/images/icon2.gif" opacity="0.50" 
      x="75" y="10" link="http://www.lamatek.com/GoogleMaps/"/>
  <panControl enable="true"/>
  <typeControl enable="true"/>
  <wheelControl enable="true"/>
  <zoomControl enable="true" size="large"/>
  <scaleControl enable="true"/>
  <overviewControl x="593" y="179" width="210" height="210"/>
  <message>Please wait...</message>
</map>

  

We hope you find this functionality useful.

Our next example shows the new custom map types feature.