Version françaiseGOOGLE API - Lotus Notes & Google Maps
An API is available to customize Google Maps. You can add your own points on the earth like with Google Earth.
Steps to interface Lotus Notes and Google Maps :
- Signup for a Google Maps API key
- Create data source to define points to display (position and description)
- Create web page to display the Google Maps map and your points
The usage of API key is restricted to an URL to define. Only elements directly accessible from this "directory" can be displayed on the map. Be careful when you define the URL. Don't panic if you define a wrong URL. You'll can define a new API Key.
- If you want to call map from a page or an agent you'll specify the URL of the database. for example http://www.acme.com/sample.nsf/
- If you want to call map from a document you'll must add the view in your URL. You can use the special view "0" too. For example : http://www.acme.com/sample/0/
To obtain an API key, go to web page http://www.google.com/apis/maps/
Step 2 : Creation of the data source
I need the same informations than Google Earth. Then I use the same form.
The extraction of data thru XML file is managed by Javascript. I could use the same file format than Google Earth. I've defined another XML format in this example to simplify the javascript code.
XML View for Google Maps
The XML File must define at least latitude and longitude. In this example I've chosen the format :
<markers>
<marker lat="latitude" long="longitude" title="titre">
<description><![CDATA[description]]></description>
</marker>
</markers>"<marker
lat=\"" + latitude + "\"
long=\"" + longitude + "\"
title=\"" + titre + "\">
<description><![CDATA[" + description + "]]></description>
</marker>"I create a form to display view as XML flow.
- New form named "$$ViewTemplate for <Name of my view>"
- Select Option "Type of file : Other : text/xml" in form properties
- Insert XML header code :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<markers> - Insert the view with option display as HTML
- Insert XML footer code :
</markers>
I use a Lotus Notes "Page" to display map and points. You can use agent or document too.
The minimal code display map without points is :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=MyGoogleMapsAPIKey"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(27.994401,13.164063),1, G_HYBRID_MAP );
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=MaCleAPIGoogleMaps"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(27.994401,13.164063),1, G_HYBRID_MAP );
GDownloadUrl("googlemaps.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latitude = parseFloat(markers[i].getAttribute("lat"));
var longitude = parseFloat(markers[i].getAttribute("long"));
var title = markers[i].getAttribute("title");
var desc =
markers[i].getElementsByTagName("description")[0].firstChild.nodeValue;
var point = new GLatLng(latitude,longitude);
var marker = new GMarker(point);
map.addOverlay(marker);
}
});
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>- var latitude = parseFloat(markers[i].getAttribute("lat"));
To extract attribute of XML tag. - var desc = markers[i].getElementsByTagName("description")[0]
.firstChild.nodeValue;
To extract values declared between two XML tags.
To do that, I declare a new Javascript function :
function createMarker(point,title, desc ) {
var bulle = "<h3>" + title + "</h3><p>" + desc +"</p>";
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
map.setCenter(point,14, G_HYBRID_MAP );
marker.openInfoWindowHtml(bulle);
});
return marker;
}You can look at an example (for the moment in french): http://free.dominoserver.de/it/dominoweb.nsf/googlemaps
To have more informations about Google Maps API you can read the API documentation
1 comments:
Brilliant article! Thanks a lot for that. It was very well written and though I still had problems I got it in the end. Thank you very much.
One of the work arounds I needed was because the XML form was text/xml and therefore needed the following call to get it...
http://path/db.nsf/Googlemaps.xml?ReadForm
Post a Comment