Web Maps with the Google Map API
by Dionysios G. Synodinos

Listing One

<Placemark>
  <name>My Office</name>
  <LookAt>
    <longitude>23.78266482649396</longitude>
    <latitude>37.97757782541832</latitude>
    <altitude>0</altitude>
    <range>155.5744724827026</range>
    <tilt>1.639002638135242e-012</tilt>
    <heading>0.001088456620806448</heading>
  </LookAt>
  <Point>
    <coordinates>
      23.78277996313077,37.97773328821575,0
    </coordinates>
  </Point>
</Placemark>

Listing Two

function load() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(37.97775399999999, 23.782611), 16);
    map.openInfoWindow(map.getCenter(),"Welcome message");
map.setMapType(map.getMapTypes()[1]);
var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(250,0));
pos.apply(document.getElementById("control"));
map.getContainer().appendChild(document.getElementById("control"));
  }
}

Listing Three

// Adding a Marker
point = new GLatLng(GLat, GLng);
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(PopupMessage);
});
gmarkers.push(marker);
marker.type = myBox;
map.addOverlay(marker);
map.getInfoWindow().hide(); 
marker.openInfoWindowHtml(PopupMessage);

// Adding a Polyline
var polyline = new GPolyline(
    [new GLatLng(37.97790952936251,23.78223936561216),
    new GLatLng(37.97791762387,23.78145356303465)], 
    "#FF0000", 10);
    GEvent.addListener(polyline, "click", function() {
});
rmarkers.push(polyline);
polyline.type = 'polyline';
map.addOverlay(polyline);
// Adding a Polygon
var perimeter = new GPolygon(
    [new GLatLng(37.97635717824197,23.78899058286345),
    new GLatLng(37.97708237409014 ,23.7884251217523),
    new GLatLng(37.97747123844004,23.78810420996354)],
    "#003300", 5, 0.5,"#84FF84", 0.5);
GEvent.addListener(perimeter, "click", function() {
    });
rmarkers.push(perimeter);
perimeter.type = 'perimeter';
map.addOverlay(perimeter);


Listing Four

<!-- A KML polygon definition-->
<Placemark>
    <name>ntua</name>
    <Polygon>
        <tessellate>1</tessellate>
        <outerBoundaryIs>
            <LinearRing>
               <coordinates>
23.77640524972817,37.97997329891562,0 23.77662966873682,37.98001305553392,0 23.77648054859569,37.97997328228906,0 
<!-
    185+ similar lines with coordinates
-->
</coordinates>
            </LinearRing>
        </outerBoundaryIs>
    </Polygon>
</Placemark>

<!-The XSL to process the coordinates -->
<xsl:template match="Placemark">
    <xsl:variable name="curpos" select="position()"/>
    <xsl:text>var polygon</xsl:text>
    <xsl:value-of select="$curpos"/>
    <xsl:text> = new GPolygon([</xsl:text>
    <xsl:apply-templates
select="Polygon/outerBoundaryIs/LinearRing/coordinates"/>
    <xsl:text>], "#0000FF", 5,0.5,"#8A8AFF", 0.5);
    map.addOverlay(polygon</xsl:text>
    <xsl:value-of select="$curpos"/><xsl:text>);</xsl:text>
</xsl:template>
<xsl:template match="coordinates">
    <xsl:variable name="in" select="."/>
    <xsl:for-each select="tokenize($in, ' ')">
        <xsl:text>new GLatLng(</xsl:text>
        <xsl:variable name="tokenizedSample"
select="tokenize(.,',')"/>
        <xsl:variable name="before"
select="substring-before(.,',')"/>
        <xsl:variable name="after"
select="substring-after(.,',')"/>
        <xsl:value-of select="$after"/><xsl:text>,</xsl:text>
        <xsl:value-of select="$before"/>
        <xsl:text>),</xsl:text>
    </xsl:for-each>
</xsl:template>


3


