Tags: view all tags

SID-00294: Adding Google Earth and Google Maps API in TWiki

Status:	Answered	TWiki version:		Perl version:
Category:	CategoryApplications	Server OS:		Last update:	17 years ago

I had been looking for information on how to add a Google Earth and Google Maps applications to TWiki pages. There didn't seem to be a lot of information out there. I did get this working and whilst the method below may not be the most elegant it works! There are a number of issues:

API Coding Issues

You can add HTML and Javascript to the TWiki page, so for instance the following code could be added (see below re. the key):

<script src="http://www.google.com/jsapi?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
</script>
<script>
var ge;
google.load("earth", "1");

function init() {
  var content = document.getElementById('content');
  var currentKmlObject = null;
  google.earth.createInstance('map3d', initCallBack, failureCallBack);  
}

function initCallBack(pluginInstance) {
  ge = pluginInstance;
  ge.getWindow().setVisibility(true);
  // add a navigation control
  ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
  // add some layers
  ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
//  **** Network link code could go here - see below....
}

function failureCallBack(errorCode) {
  alert("Failure loading the Google Earth Plugin: " + errorCode);
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<!-- Edit the div tags below as required - just keep the 'div' tag shown below in your body section somewhere -->
<div id="map3d_container" style="border: 2px solid silver; width: 600px; height: 400px;">
  <div id="map3d" style="height: 100%; width: 100%;"></div>
</div>

Adjust the div size above as required.

Adding in a KML / KMZ feed

You might want to add your own feed of data from a KML or KMZ file - say created in Google Earth itself and saved off. Once you have a KML/KMZ file, it is best to do this with a 'network link'. The following code could be added in the 'initCallBack' function (at the point noted above).

  // NetworkLink
  var networkLink = ge.createNetworkLink('');
  networkLink.setName('My KMZ datafile');
  networkLink.setDescription('Display of KML code');
  networkLink.setFlyToView(true);
  // NetworkLink/Link
  var link = ge.createLink('');
  // Place the kmz elsewhere if required and update location here
  link.setHref('http://www.mywebserver.net/kmz_mapping/my_kmz_file.kmz');
  networkLink.setLink(link);
  // add the network link to earth
  ge.getFeatures().appendChild(networkLink);
}

Note that the kmz file (or kml if you prefer) is stored at a seperate location - perhaps on the same server the twiki is running on as a twiki file attachment. Again, you should note the folder structure of the TWiki - so for instance, to reference the attached file 'my_kmz.kmz' in the WebHome home page of the website http://www.mywebserver.net, you code the location of the KMZ file in the Javascript as above to http://www.mywebserver.net/twiki/pub/Main/WebHome/my_kmz.kmz.

Keycode Issues

I was having problems getting the correct API keycode until I realised the keycode should relate to the calling perl code page URL and to not the final rendered page. For instance, if you have a page containing the map: http://www.mywebserver.net/twiki/bin/Main/WebHome, then the Google API should be generated for the page: http://www.mywebsite.net/twiki/bin/.

This is a start! Comments please and happy mapping

-- StephenHallett - 2009-05-01

Discussion and Answer

Thanks Stephen for sharing this with the TWiki community! Please consider packaging this as an add-on so that people can discover this extension. See AddOnPackage, AddOnPackageHowTo, ReadmeFirst.

Also, user_corrupt is hanging out on TWikiIRC. He is working on a TWiki site that embeds Google maps. You could get in touch with him to exchange ideas.

-- PeterThoeny - 2009-05-01

Closing this question, seems to be resolved.

-- PeterThoeny - 2009-07-05

If you answer a question - or someone answered one of your questions - please remember to edit the page and set the status to answered. The status selector is below the edit box.

SupportForm
Status	Answered
Title	Adding Google Earth and Google Maps API in TWiki
SupportCategory	CategoryApplications
TWiki version
Server OS
Web server
Perl version

Topic revision: r3 - 2009-07-05 - PeterThoeny

Account
- Log In
- Register User

Edit
Attach

Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2026 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.