I recently received several questions about a google maps in webi mashup post i published some time ago. So, i decided to redo the example, using SAP Business Intelligence Platform 4.0 and the latest version of webi.
The crux of this approach is as follow:
A webi report based on the e-Fashion sample universe was created, the report has store address info, and yearly sales numbers.
The webi report contains two blocks. The left block has hyperlinks with store addresses, and the right block contains the map. When you click a store on the left, the map updates with the address of that store and the map info window displays the store yearly revenues as a bar chart.
The map is created in webi using a small html code snippet that embeds the html file that contains the actual map parsing and creation code in an iframe inside a div.
The left block contains a formula that translates the store addresses and revenues to html hyperlink that targets the iframe, passing it different address and sales data so it reloads with the new store data as you click the hyperlinks.
That’s it in short. You can find the report .wid file, and the embedded html file in a zip here. Enjoy!
This seems to be a very popular post related to Google Maps in Webi, so I wanted to get my 2-cents in.
We ended up using for BI4.1 SP03 and higher a native extension approach that uses a supported SDK called extension points. Now we have a supported Google Maps extension that includes the licensing through our master agreement with Google and also includes a point and click designer that pretty much covers all of the maps scenarios you can come up for webi.
Happy to send anyone access who wants to give it a go: http://cmapsanalytics.com/webi.html
That’s fantastic Ryan, thank you!
I have placed file5 in this path–>> \Tomcat6\webapps\mashup
and generated new key for my server with this link–>>>https://code.google.com/apis/console/b/0/?noredirect&pli=1#project:1088470342927:access
But still I am getting this error:
HTTP Status 404 – /mashup/file5.html
type Status report
description The requested resource (/mashup/file5.html) is not available.
instead of google map
404 error means the web server cannot find the resource requested. Can you browse to http://YOUR_SERVER:YOUR_PORT/mashup/file5.html? If yes, can you check which URL is being used in the webi iFrame? I don’t remember of the example had a relative path or a server name in it you need to replace
Thanks a ton for posting the idea and sharing the code.
However I am facing the same issue as Thomas (The iFrame flashes grey when I click the state address but the map isnt rendered) even after using the URLEncode. Here is how I’m using it.
=”“+URLEncode([Address]+” “+[City]+” “+[State]+” “)+[Zip Code]+””
Moreover copying those values and hitting the tomcat link directly DID NOT work for me either.
Not sure what I’m missing here. Do I need to get API key? And how to use it?
Yes, you need a google api key associated with the name of the host serving up the map for this to work. You can lookup on google how to obtain an api key, i’m not sure they still do that, it’s a fairly old post…
Wow! It worked with no hiccups. And the use of google’s chart api made me realize that we can do wonerful things with web intelligence now :-))
Hi Ron, I finally have almost got this working. I am now able to push addresses directly to the tomcat html5 file, but within webi it’s still not working. The iFrame flashes grey when I click the state address but the map isnt rendered – I can copy those values and hit the tomcat link directly and they work however. I have experiemented with many combinations under the preferences tab (Rich Internet Client / Web for both view and modify) but I still can’t get it working, so close!!! Any ideas what’s causing webi to not work?
Ah got it… URLEncode!!
Nice Thomas, glad you were able to resolve the issue
Thanks for the post Ron. I downloaded the file and placed them in my tomcat also. But the Webi report is not showing the map. Further, i tried to used your link to open the file “http://YOURHOST:YOURPORT/mashup/file5.html?address=boston ma]&2004=10&2005=20&2006=30.” from browser. In my case, either its not giving any ERROR nor the MAP in the browser (used IE). Anything i need to do more ?
Thanks for your help in advance.
Velu, thanks for your comment. You need to replace “YOURHOST:YOURPORT” with your server and your port.. Also, as mentioned, you need to obtain the google maps api key for your server and replace that as well.
Great post Ron! Is there a way to pass all of the data within a WEBI table at the same time? AKA would it be possible to display all points at once on your map?
Great question Nick. To do that, you will need to design a variable in webi that will concatenate all the values needed and then pass them to the map. That might be easier to do in the universe layer where you can have more flexibility in the data layout in terms of rows or columns.
I downloaded the files and added them to my tomcat folder.
However I get a error “Stack overflow at line: 11 ” when clicking the links in the report.
I have tested the links an they work fine, but the stack overflow irritates me 🙂
Any ideas why i get the stackoverflow message?
PS: I have the mashups files in the ../Tomcat/mashup/ folder instead of the Tomcat6/mashup as described in the example. This is cuz when I add it to the Tomcat6 folder nothing happens…
hmm.. not sure Pal, need more info. By the way, you mean you deployed the web app files in the webapps folder for your tomcat install, right..?
Yes the files are located on the server under \\..\tomcat\…\webapsmashup\filename….
Please update the existing code, to my knowlege api for google charts have also changed, can you please give us a working code.
While opening the .wid file into Web Intelligence rich client 4.0 I am facing an error i.e. Load Driver Call : InitCube (WIS 00000).
Could you please suggest me how to get the .wid file.
You can mail me on firstname.lastname@example.org
Thanks!! – Nauman.
Hi Nauman, not sure about this error, the report is based off eFashion, has the data saved, and no security… Also, the post has some info on the report so you can try to reproduce it.
I first thank you for your post
If there is anyone who has migrated, could you recommend me any page where I can do it, or send my code to correct bugs me?
Thanks in advance, greetings
Seems API v2 is deprecated and keys are no longer availiable – I don’t suppose you have rewritten the html document against API v3?
Hi Thomas, no, i have not, but i imagine you can find a lot of resources online on how to convert older google maps code to new.. Thanks! – Ron
Google has decided that its users of their well-liked Google Maps service will begin becoming charged a fee for utilizing their service. Websites that are going embedding a Google Map of their location will be charged a fee for usage.This new Google Maps fee is going to hit mostly the bigger companies, particularly the Travel industry. I suspect that certain websites that are the heaviest users would be websites like TripAdvisor and Expedia.”..
With kind thoughts
Brilliant mate! Really loved the idea. But being new to Google APIs, I was wondering if I can have a list of postcodes mapped as pins on the map? How do I go about doing this? Any pointers would be deeply appreciated! Thanks in advance!
Thanks Som. I assume you can create a webi variable that will string together multiple values of addresses as an array and pass this to the google API embedded in the iFrame and then process from there.
It works ! The problem came from my browser..Works fine with IE but not with Chrome.
Good to know. Thanks !
Great example. I’ve been updating your report in the CMS, it works fine withe the Google API inside but when I click on the address I get this error message :
Each blank is replaced by “%20” so the API can’t find the right place. Any ideas to resolve this issue ?
William, webi has a function to encode url (URLEncode), make sure you wrap the address with that, it will set the url encoding for the browser correctly.
Thanks! that was all.
Resolved. I can view map and graph pop up with http://:/mashup/file5.html?address=boston ma]&2004=10&2005=20&2006=30
Did not resolve my Webi report or help with the .wid you provided that I uploaded to my Enterprise from Rich Client.
The iframe still shows code and not google map, and when I click on hyperlink address on left block the whole column is selected and doesn’t seem to let me select just one.
hmm… Jeff are you viewing the report in the webi html viewer? Sounds like you might be using the java viewer, this mashup will only work in the html viewer. I posted a live example tonight, check it out..
I am new to webi and I don’t know how to embed iframe in webi
Though I am able to view the map running file5.html in server but thing is that I am not able to embed the html file into webi neither by putting local file into local webi or by putting server file into my webi using iframe tag.My iframe tag is like this :-
where my folder name is Mashup.
Can you please help me to resolve this with detailed steps
Rabi, i posted the actual webi .wid file, as well as the html file that needs to be placed on a web server that is accessible from the client that runs the webi report, and to avoid any cross domain issues, i would recommend using the bo tomcat server.
how did you resolve the issue with the api key?
Nevermind, trying to get my own api key
I get a google maps api disabled message when i try to access independent of webi. Obtain a valid key…
all i see in the iframe cell is “<iframe id="mapFrame" name= …."
Jeff, make sure that the webi cell that contains the iFrame is set to be displayed as html. Sounds like it is displaying the html code, instead of rendering it…
Jeff, try to break down the problem into small pieces and solve one at a time… first of all, can you load the file5.html file in a web browser independent of webi? So, try to access it from a web browser (http://YOURHOST:YOURPORT/mashup/file5.html?address=%5Bsome address, for example, boston ma]&2004=10&2005=20&2006=30. If you look at the html code, you will see this is the url format the js function expects, as it will parse the info from the url string and pass it to the map object. If that works, make sure your in webi the reference to the html file is correct, and also make sure you set the viewing options properly on the cell, so they render the html, not display the html code.
I created a Webi report from eFashion with same objects, borrowed the same formula for gmapaddress and iframe variables. Block 1 has gmapaddress formatted as Hyperlink and Block 2 has iframe and formatted to HTML. I placed file5.html in my /Tomcat6/webapps/mashup/ folder.
Unfortunately, all i see in the iframe cell is and clicking hyperlink doesn’t do anything.
Can you advise?
I am new to webi, Your report is really nice and i wanted to try it so I downloaded your zip file. can you please let me know where to place file5.html file and also do we need to set the state field in your report to display as html?
John, in my example, i created a directory called mashup on in the tomcat webapps dir. You do need to set the iframe field to be viewed as html to have webi render the html code and not just display it as text. Regards – Ron
Can you please post a step by step video guide in YouTube which you help developers like me who are new to Webi and api related..thanks
Hi Ron, great post. I have been trying to get masher for a while now. I will be setting up a demo environment in XI 4.0 and need to have a mapping tool.
Do you know where I can download it? I’ve looked all over the SAP site and can’t find it.
Is it a plugin or licensed software?
Doesn’t Google charge for the access to their API’s?
Many questions…sorry. Just excited because this may be the solution for a client need that we have been looking for.
David, feel free to download my source files and setup as you see fit. Please note that there are still limitations with printing/exporting to PDF, as webi will not render the html as html (the map image), but will actually display the html code in pdf format. BO Labs has a mashup plugin solution they published years ago, but i have not seen it for at least two years, don’t think there was a lot of interest… Google has some API they require payment and many that are free. Basic map API usage is free. You can also use the static google map image API, it’s easier to setup (basically just need to construct a URL), free and might work better with PDF, since it’s an image.