Home‎ > ‎

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:

Updated:  July 6, 2010

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

15m HF Contacts - March 28, 2010


The code:

hf.xml (with JavaScript code)

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="15m HF Contacts">
    <Require feature="sharedmap" />
  </ModulePrefs>
  <Content type="html"><![CDATA[
 
<link type="text/css" rel="stylesheet" href="http://sites.google.com/site/rio4br/Home/kml/hf.css" />
 
<script type="text/javascript">
  window.onload = function() {
    loadMap();
  }
</script>
 
<script type="text/javascript"
  src="http://maps.google.com/maps?file=api&amp;v=2.124&amp;key=">
  // key value not required if file hosted on Google Sites?
</script>
 
<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>
  <div id="map"></div>
  <div id="sidebar">
    <h4>15m Isotron HF contacts</h4>
    <ul>
    <li><a href="#" onclick="GEvent.trigger(qth, 'click'); return false">
      QTH
    </a>
    <p/>
    <li><a href="#" onclick="GEvent.trigger(australia, 'click'); return false">
      Australia
    </a> - VK4KW
    <li><a href="#" onclick="GEvent.trigger(argentina, 'click'); return false">
      Argentina
    </a> - LW1DTZ
    <li><a href="#" onclick="GEvent.trigger(brazil, 'click'); return false">
      Brazil
    </a> - ZX5J
    <li><a href="#" onclick="GEvent.trigger(texas, 'click'); return false">
      Texas
    </a> - NX5M
    <li><a href="#" onclick="GEvent.trigger(w6yx, 'click'); return false">
      Stanford
    </a> - W6YX
    </ul>
    <a href="#" onclick="GEvent.trigger(overview, 'click'); return false">
      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"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>

<Placemark>
  <name>AF6DS</name>
  <description>Agnews Historic Park (portable QTH) - March 28, 2010 </description>
  <Point>
    <coordinates> -121.955287, 37.392220 </coordinates>
  </Point>
</Placemark>

<Placemark>
  <name>VK4KW - Toogoolawah QLD, Australia</name>
  <description>21.319.0 USB-PH 60W</description>
  <LineString>
    <coordinates> -121.955287,37.392220 152.370,-27.080 </coordinates>
  </LineString>
  <Style>
    <LineStyle>
      <color>#ff0000ff</color>
      <width>2</width>
    </LineStyle>
  </Style>
</Placemark>

<Placemark>
  <name>ZX5J - Rancho Queimado - SC, Brazil</name>
  <description>21.263.0 USB-PH 95W </description>
  <LineString>
    <coordinates> -121.955287,37.392220 -49.013,-27.673 </coordinates>
  </LineString>
  <Style>
    <LineStyle>
      <color>#ff0000ff</color>
      <width>2</width>
    </LineStyle>
  </Style>
</Placemark>

<Placemark>
  <name>LW1DTZ - La Plata, Buenos Aires, Argentina</name>
  <description>21.245.0 USB-PH 80W </description>
  <LineString>
    <coordinates> -121.955287,37.392220 -57.954,-34.920 </coordinates>
  </LineString>
  <Style>
    <LineStyle>
      <color>#ff0000ff</color>
      <width>2</width>
    </LineStyle>
  </Style>
</Placemark>

<Placemark>
  <name>NX5M - Somerville, - Texas</name>
  <description>21.344.5 USB-PH 60W </description>
  <LineString>
    <coordinates> -121.955287,37.392220 -96.5289,30.3461 </coordinates>
  </LineString>
  <Style>
    <LineStyle>
      <color>#ff0000ff</color>
      <width>2</width>
    </LineStyle>
  </Style>
</Placemark>

<Placemark>
  <name>W6YX shack - Stanford, CA</name>
  <description>21.379.2 USB-PH 60W </description>
  <LineString>
    <coordinates> -121.955287,37.392220 -122.1657,37.4034 </coordinates>
  </LineString>
  <Style>
    <LineStyle>
      <color>#ff0000ff</color>
      <width>2</width>
    </LineStyle>
  </Style>
</Placemark>

</Document>
</kml>


=== end ===