Channels ▼

Web Development

Web Maps with the Google Map API

Source Code Accompanies This Article. Download It Now.

Printing Markers, Polylines, and Polygons

Adding elements on an embedded map is done in a similar way using the coordinates that are contained in the KML file; see Listing Three.

We've taken it a step further to register listeners every time an element is printed and also have added every element in an array. This way we are able to reference these element in the future, while our application is executed; for example, to remove them from the map using the map.removeOverlay() function, you would use map.removeOverlay(permarkers[4]). The API has several facilities for customizing the way the different kinds of elements appear on the map. The markers can have custom size, icon, and shadows, and we can assign specific color, width, and transparency for polylines and polygons.

For a small number of locations, it is fairly easy to copy the coordinates by hand and insert them in JavaScript code. But as the number of locations increase, it is harder to manipulate these 16-digit numbers and it becomes necessary to use programming to extract them for the KML file. In our project, the number of locations was big! There were several polylines that were described using more than 60 different points that accounted for 100+ different 16-digit numbers. To overcome this, we had to develop XSL filters for the KML file that contained recipes for producing JavaScript code; see Listing Four.

// Adding a Marker
point = new GLatLng(GLat, GLng);
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.type = myBox;

// 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() {
polyline.type = '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() {
perimeter.type = 'perimeter';
Listing Three

<!— A KML polygon definition—>
    185+ similar lines with coordinates

<!-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:text>], "#0000FF", 5,0.5,"#8A8AFF", 0.5);
    <xsl:value-of select="$curpos"/><xsl:text>);</xsl:text>
<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"
        <xsl:variable name="before"
        <xsl:variable name="after"
        <xsl:value-of select="$after"/><xsl:text>,</xsl:text>
        <xsl:value-of select="$before"/>
Listing Four

In some situations, it is possible to move the XML-specific processing tasks over to the client and have the browser initially call the original KML file with the XMLHttpRequest API. However, this approach is not advisable in most cases because the overhead on the client's machine may cause the system to respond slowly or even freeze for a considerable amount of time.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.