Test.Using Google Maps API in Gadgets

Google Maps JavaScript API allows programmers to develop applications that use Google Maps. Google Maps API is written in HTML and JavaScript. Google Gadgets are XML files that contain HTML with JavaScript and other tools.

Here's an example using Google Drive to create a Gadget for Google Sites using the Google Maps API example, "Hello, World."

1. Copy the Hello, World code (shown below) from the Google Maps API tutorial.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

2. Open Notepad (or other editor) and paste the code.

3. Edit the code as follows.

3.1. Replace the "API_KEY" string with your own Google Maps API Key.

3.2. Add the following components.

<Module> to indicates that this XML file contains a gadget.

<ModulePrefs> with information about the gadget such as its title, description, author, and other optional features.

<Content type="html"> indicating that the gadget's content type is HTML.

<![CDATA[ ...insert HTML here... ]]> to enclose HTML content.

</Content> to signify the end of the Content section.

</Module> to signify the end of the gadget definition.

See the edited file below:

<Module>
<ModulePrefs title="GMaps.xml example">
</ModulePrefs>
<Content type="html">
<![CDATA[

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCLV4A5uRztqWDxVjo8m0CccnttbmO0dsk">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

]]>
</Content>
</Module>

4. Upload the file as GMaps.xml to a public folder on Google Drive.

5. On Google Drive, check the box to the left of the file name. Open the Details and Activity display for the file. Select Details. At the bottom, copy the Hosting URL: https://googledrive.com/host/0By9lQUVEpNaiUEVmVXVLb2VCY2M/GMaps.xml

7. On Google Sites, select Insert, More gadgets, Add Gadgets by URL, and paste the Hosting URL. Select Add, and OK. The result appears below.

GMaps.xml example

The gadget spec URL could not be found

*Thanks to Robert Wilcox and Mori.

https://fe5f3770ba32de3297efdb8c8f24f301bed8b927.googledrive.com/host/0By9lQUVEpNaiUEVmVXVLb2VCY2M/GMaps20140920.xml

GMaps.xml example 20140920

The gadget spec URL could not be found

Comments