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:

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:

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:

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:

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.

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.