matnewman.com

Using IBM Notes data as a source for Google Maps API

Mat Newman  May 23 2013 13:12:22
During the past couple of weeks I've been consulting for a customer who required some heavy integration between IBM Notes data and Google Maps.  That project is in it's final stages and is close to coming online.  What that experience has shown me is how (relatively) simple it is to take source data from a Notes application and present that information using the Google Maps API on the web for public consumption.

To begin with, the complete Google Maps API (v3) is available here for your reference.

Using the Google Maps API is fairly straight forward:
1.        Create a HTML page,
2.        Call the Google Maps source script, and Include a target <div> to inject the Map into,
3.        Declare your source data,
4.        Write a script to create the map and add elements to the map,
5.        Open the page, and present the map.

So here are the steps to put this all together

1. Create a HTML page


For those of us in Notes land, this is one of the easiest things to do, you could XPage it, or go old school and use a Form or Page design element.  To keep this really simple - and to demonstrate that this can be done in all versions of Notes back to r6 - I'm going to just use a couple of Page's that are included in the sample database that can be downloaded at the end of this post.
a.        Create the Page,
b.        Change the Page properties so that it's contents are HTML
c.        Insert the following HTML code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Displaying Notes based data on Google Maps</title>
<style>
body{
font: normal 10px Helvetica, Arial sans-serif;
margin: 0;
}
h1 {
font-size: 12px;
background: yellow;
padding: 4px;
}
#mymap {
width: 600px;
height: 600px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="mymap"></div>
<script> refer later in this post (step 4 above) </script>
</body>
</html>


2. Call the Google Maps source script, and Include a target <div> to inject the Map into,


The Script reference for maps.googleapis... is the source script that is required for Google Maps integration.

Note in the above HTML code, the <div> in line 24 has an "id" of "mymap". This is the div element that our map will be injected into.


3. Declare your source data


This is where it gets really interesting; you can create individual Locations (a place on the map, known as a "Marker"), Lines (a line on a map joining one or more locations, known as a "PolyLine") and even Areas (a shape drawn on the map to represent an area, known as a "PolyGon").

You can declare these elements any way you like. In my example, I'm going to create an array of JavaScript Objects, and use the Object's properties as the properties of the google maps elements in my script, eg:

var vMatsPlaces = ({"name":"Notes Induction", "icon":"matnewman.jpeg","posn":[-33.867487,151.20699], "category":"Training", "location":"Sydney, Australia", "date":"Dec 2009"},{"name":"IBM Connect 2013", "icon":"matnewman.jpeg","posn":[28.367481,-81.56059], "category":"Conference, Attendee, Speaker", "location":"Walt Disney World Resort, Florida, USA", "date":"Jan 2013"});

So you can see that the first object in the array has the following properties:

name
: IBM Connect 2013
icon
: matnewman.jpeg
posn
: 28.367481,-81.56059
category
: Conference, Attendee, Speaker
location
: Orlando, Florida, USA
date
: Jan 2013

Again, if you have all of your source data in a Notes view, think how easy it is to write a view column formula that pulls data out of a record and creates an element for the above array for each Notes document, eg a column formula like the following:

"{\"name\":\"" + Subject + "\", \"icon\":\"" + Image + "\",\"posn\":[" + LocationLatLon + "], \"category\":\"" + Categories + "\", \"location\":\"" + Location + "\", \"date\":\"" + StartDate + "\"},"

Where Subject, Image, Categories, LocationLatLon, Location and StartDate are fields contained in each record. Yes, some of those field names should be familiar, they're the same field names in every IBM Notes Calendar entry you create ;-)

So the additional fields in this demonstration that aren't contained within a standard Notes calendar entry are: "Image" which is NOT necessary, and the "LocationLatLon" field, which is absolutely essential to place information on a Google Map!

My source data comes from an Embedded View on the page, which has a single column with the formula above, and a line for each Notes Document that represents a Marker I'm going to place on the map.

4. Write a script to create the map and add elements to the map


The following script contains the data array vMatsPlaces; an initialize function; a loop that iterates through each element in the data array and adds them to the map; and the showDetails function: which adds a pop-up information window on each Marker to display details for the item when clicked:


var map;
var vMatsPlaces = ({"name":"Notes Induction", "icon":"matnewman.jpeg","posn":[-33.867487,151.20699], "category":"Training", "location":"Sydney, Australia", "date":"Dec 2009"},{"name":"IBM Connect 2013", "icon":"matnewman.jpeg","posn":[28.367481,-81.56059], "category":"Conference, Attendee, Speaker", "location":"Walt Disney World Resort, Florida, USA", "date":"Jan 2013"});

function initialize() {
var map_canvas = document.getElementById('mymap');
var map_options = {
  center: new google.maps.LatLng(38.822591,66.09375),
  zoom: 1,
  mapTypeId: google.maps.MapTypeId.TERRAIN
  }
var map = new google.maps.Map(map_canvas, map_options)
infoWindow  = new google.maps.InfoWindow();
//Add Mat's Places
for (mn in vMatsPlaces) {
   var pn = new google.maps.LatLng(vMatsPlaces[mn].posn[0] , vMatsPlaces[mn].posn[1]);
   var marker = new google.maps.Marker({
           position: pn ,
           icon: vMatsPlaces[mn].icon,
           dspTitle: vMatsPlaces[mn].name,
           dspCategory: vMatsPlaces[mn].category,
           dspLocation:  vMatsPlaces[mn].location,
           dspIndustry:  vMatsPlaces[mn].industry,
           map: map
           });
   google.maps.event.addListener( marker, 'click', showDetails);
   marker.setMap(map);
   };
}
function showDetails (event) {
   var dtext = "<h1>" + this.dspTitle + "</h1><p><b>Activity: </b>"+ this.dspCategory +"</p><p><b>Location: </b>"+ this.dspLocation +"</p><p><b>Industry: </b>"+ this.dspIndustry +"</p>";
   infoWindow.setContent(dtext);
   infoWindow.setPosition(this.position);
   infoWindow.open(this.map);
   }
google.maps.event.addDomListener(window, 'load', initialize);



5. Open the page and present the map


Yep, that's it. You have a <div> to inject the map into, you've called the Google Maps source, created a data array, initialized the map object, and then looped through the data array (sourced from IBM Notes data) to place those elements on the map.

And the final result, some of the places I've been in the past few years:




You can download the sample project that includes the above examples HERE.

Creating a Google Map using source data from IBM Notes (relatively) easy! Enjoy :-)
Comments

1Sara  05/23/2013 16:32:32  
Using IBM Notes data as a source for Google Maps API

Hello Mat,

"You can download the sample project that includes the above examples HERE. "

WHERE?

2Mat Newman

05/23/2013 16:37:34  Using IBM Notes data as a source for Google Maps API

@1, Sara: fixed the link, you can download the sample database now...

Mat Newman IBM Champion

3Sean Cull  05/23/2013 16:59:31  
Using IBM Notes data as a source for Google Maps API

Just be aware of the significant costs involved.

{ Link }

4Hogne B. Pettersen  05/23/2013 19:14:31  
Using IBM Notes data as a source for Google Maps API

Awesome, Matt!

Your tip here could easily be modified to be used with php or any other html scripting language.

5Mat Newman

05/24/2013 8:32:05  Using IBM Notes data as a source for Google Maps API

@3, Sean: True for private deployment, however; as long as the maps you are surfacing are publically available there is no fee, per: { THIS }

@4, Hogne: Thought you would like it, and yes; any scripting language or method of surfacing the data (eg: XPages) will work. The key component is the Location Latitude and Longitude in decimal format contained in a field in the Notes document.

Mat Newman IBM Champion

6Patrick Kwinten  05/24/2013 22:41:20  
Using IBM Notes data as a source for Google Maps API

great you're doing development these days... or should we get worried?

7Mat Newman

05/27/2013 11:33:00  Using IBM Notes data as a source for Google Maps API

@6, Patrick: LOL! I've been known to dabble in the dark arts ;-)

Mat Newman IBM Champion

8Martin Meijer  05/28/2013 2:22:57  
Using IBM Notes data as a source for Google Maps API

Hi Mat,

I created a google maps custom control. You can find it on openntf. Have a look at { Link } I hope it is usefull for you.

Mat Newman

THE Lotus Notes Guy. Productivity Guru. Social Evangelist. IBM Champion for IBM Collaboration Solutions, 2011/2012/2013. IBMer. Views are my own.

#GetProductive #GetLotusNotes

Mat Newman

New to IBM Lotus Notes? START HERE



I'm attending. IBM Software.
      Lotusphere 2012. Business. Made Social. January 15 - 19. Orlando,
      FL. Drive Adoption for IBM Connections



Home  | 

Get Serious. Get Domino.