Google Maps Widget for IBM Connections Profiles

Today Klaus Bild posted this very interesting article on his blog:

We showed an example of a Google Maps Widget in our IBM Connect session in Orlando and we promised to publish the code on our blogs, so here we go.
First of all this image shows you how the widget works, the profile values for “Building” and “Office” are the full address which is shown on the Google map:
Look at slide 129 in our presentation (Slideshare link) where you have to place the googleMap.xml file and how you can add it to the IBM Connections Profiles. And this is how googleMap.xml should look like:


Will be replaced by iFrame

var widgetId = “_” + this.iContext.widgetId + “_”;
var attributesItemSet = this.iContext.getiWidgetAttributes();
var displayedUserKey = attributesItemSet.getItemValue(“profileDisplayedUserKey”);
url : “/profiles/atom/” + displayedUserKey,
handleAs : “xml”,
load : function(xml, ioargs) {
var city = atomGetNodeValue(xml, “x-building”);
var street = atomGetNodeValue(xml, “x-office-number”);
dojo.byId(“customMap”).innerHTML = ““;
error : function(error, ioargs) { console.log(“error retrieving profile: ” + error); }
// iterate DOM to find the element with the requested class attribute
function atomGetNodeValue(xml, className) {
var nodeList = xml.getElementsByTagName(“span”);
for ( var i = 0; i < nodeList.length; i++) {
var element = nodeList.item(i);
if (element.getAttribute(“class”) == className) {
return (element.firstChild != null ? element.firstChild.nodeValue : “”);


And never forget:

 Thanks, Klaus !!!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s