KML (Keyhole Markup Language - Google Maps)

How to embed Google Map KML and JavaScript into a Google Sites website - using a XML-based Google Gadget

- Include JavaScript code into .xml file (see example/Attachments file below)
- Upload .kml, .xml, .css files as Google Sites attachments
- Edit Google Sites webpage, then:
  - Insert -> More gadgets... -> Add gadget by URL -> (specifiy the .xml file)
  - e.g. http://sites.google.com/sites/rio4br/Home/kml/hf.xml
- Save

Notes:

- It seems that a Google Map API key is not required from http://code.google.com/apis/maps - maybe because website is being hosted by Google?
- The ModulePrefs title in the .xml file is not displayed with the map, but is specified by editing the Google gadget Preferences.
- Relative URLs (e.g. .css & .kml) in the .xml file does not seem to work.
- The width & height specified by both .css and Google gadget Preferences should match (in pixels).

References:

- Beginning Google Maps Mashups with Mapplets, KML, and GeoRSS; Chapters 3, 4, 7 - pp. 30-37, 70-71,. 119-120, Sterling Udell, Apress, 2009.
- Alternative to <body onload="initialize()"> for V3 map call ?; (how to load JavaScript not using the HTML body tag, but within the HTML body), JohnH, April 26, 2010.
- Custom Code and Google Sites; (see Gadget Code section), Laura Jean Karr, March 14, 2010.

Updated: July 6, 2010

And this is how the map looks on this Google Site webpage (and try clicking on the links):

The code:

hf.xml (with JavaScript code)

<?xml version="1.0" encoding="UTF-8"?>

</ModulePrefs>

<Content type="html"><![CDATA[

window.onload = function() {

loadMap();

}

</script>

src="http://maps.google.com/maps?file=api&v=2.124&key=">

// key value not required if file hosted on Google Sites?

</script>

// Declare variables for later use

var map;

var geoXml;

var coordinates;

var blackIcon;

function loadMap()

{

// loadMap: initialize the API and load the map onto the page

// Get the map container div

var mapDiv = document.getElementById('map');

// Confirm browser compatibility with the Maps API

if (!GBrowserIsCompatible())

mapDiv.innerHTML = 'Your browser not compatible with Google Maps.';

else

{

// Comment

map = new GMap2(mapDiv,

{mapTypes: [G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP]});

coordinates = new GLatLng(0.0, 0.0);

map.setCenter(coordinates, 10, G_PHYSICAL_MAP);

map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());

geoXml = new GGeoXml('http://sites.google.com/site/rio4br/Home/kml/hf.kml', xmlLoaded);

map.addOverlay(geoXml);

// --- callback actions for sidebar links ---

coordinates = new GLatLng(0.0, 0.0);

// map overview callback

overview = new GMarker(coordinates, {icon: blackIcon});

GEvent.addListener(overview, 'click', xmlLoaded);

// qth callback

qth = new GMarker(coordinates, {icon: blackIcon});

GEvent.addListener(qth, 'click', qthZoom);

// Australia callback

australia = new GMarker(coordinates, {icon: blackIcon});

GEvent.addListener(australia, 'click', austrZoom);

// Argentina callback

argentina = new GMarker(coordinates, {icon: blackIcon});

GEvent.addListener(argentina, 'click', argenZoom);

// Brazil callback

brazil = new GMarker(coordinates, {icon: blackIcon});

GEvent.addListener(brazil, 'click', brzilZoom);

// Texas callback

texas = new GMarker(coordinates, {icon: blackIcon});

GEvent.addListener(texas, 'click', texasZoom);

// K6YX callback

w6yx = new GMarker(coordinates, {icon: blackIcon});

GEvent.addListener(w6yx, 'click', w6yxZoom);

}

};

function xmlLoaded()

{

// have map show all KML points:

geoXml.gotoDefaultViewport(map);

};

// Note: lat,long coordinates are specified in reverse order from KML

// 3 to 4 decimal places is good enough for most coordinates

function qthZoom()

{

coordinates = new GLatLng(37.392220, -121.955287);

map.setCenter(coordinates, 17, G_SATELLITE_MAP);

};

function austrZoom()

{

coordinates = new GLatLng(-27.080, 152.370);

map.setCenter(coordinates, 14, G_PHYSICAL_MAP);

};

function argenZoom()

{

coordinates = new GLatLng(-34.920, -57.954);

map.setCenter(coordinates, 11, G_PHYSICAL_MAP);

};

function brzilZoom()

{

coordinates = new GLatLng(-27.673, -49.013);

map.setCenter(coordinates, 15, G_HYBRID_MAP);

};

function texasZoom()

{

coordinates = new GLatLng(30.346, -96.529);

map.setCenter(coordinates, 10, G_PHYSICAL_MAP);

};

function w6yxZoom()

{

coordinates = new GLatLng(37.4034, -122.1657);

map.setCenter(coordinates, 17, G_SATELLITE_MAP);

};

</script>

<h4>15m Isotron HF contacts</h4>

<ul>

QTH

</a>

<p/>

Australia

</a> - VK4KW

Argentina

</a> - LW1DTZ

Brazil

</a> - ZX5J

Texas

</a> - NX5M

Stanford

</a> - W6YX

</ul>

overview map

</a>

</div>

]]></Content>

</Module>

hf.css

html {

height: 100%;

}

body {

height: 100%;

margin: 0;

}

#map {

width: 70%;

height: 500px;

}

#sidebar {

position: absolute;

left: 70%;

top: 0;

right: 0;

bottom: 0;

overflow: auto;

padding: 1em;

}

hf.kml

<?xml version="1.0" encoding="UTF-8"?>

<description>Agnews Historic Park (portable QTH) - March 28, 2010 </description>

<Point>

</Point>

</Placemark>

<name>VK4KW - Toogoolawah QLD, Australia</name>

</LineString>

<Style>

</LineStyle>

</Style>

</Placemark>

<name>ZX5J - Rancho Queimado - SC, Brazil</name>

</LineString>

<Style>

</LineStyle>

</Style>

</Placemark>

<name>LW1DTZ - La Plata, Buenos Aires, Argentina</name>

</LineString>

<Style>

</LineStyle>

</Style>

</Placemark>

<name>NX5M - Somerville, - Texas</name>

</LineString>

<Style>

</LineStyle>

</Style>

</Placemark>

<name>W6YX shack - Stanford, CA</name>

</LineString>

<Style>

</LineStyle>

</Style>

</Placemark>

</Document>

</kml>

=== end ===