Google maps in webi 4.0 mashup

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.

 In the original post, i used server side code (.jsp file) to pass info from the webi report to the google maps. This time, i used client side code (javascript), which is better suited for this application and provides better flexibility.
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 entry was posted in BusinessObjects 4.0, Web Intelligence and tagged , . Bookmark the permalink.

43 Responses to Google maps in webi 4.0 mashup

  1. David Clifton says:

    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.

    thanks

    • Ron Keler says:

      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.

  2. Tilak says:

    Hi 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

  3. John says:

    Hi Ron,
    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?
    Thanks

    John

    • Ron Keler says:

      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

  4. Jeff says:

    Hi Ron,

    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?

  5. Jeff says:

    all i see in the iframe cell is “<iframe id="mapFrame" name= …."

    • Ron Keler says:

      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…

    • Ron Keler says:

      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=some 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.

  6. Jeff says:

    I get a google maps api disabled message when i try to access independent of webi. Obtain a valid key…

  7. Jeff says:

    Nevermind, trying to get my own api key

  8. Jeff says:

    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.

    • Ron Keler says:

      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..

      • Rabi says:

        Hi,
        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

        Thanks
        Rabi

        • Ron Keler says:

          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.

    • JB says:

      Hi Jeff,
      how did you resolve the issue with the api key?
      Thanks

  9. Jeff says:

    Thanks! that was all.

  10. William says:

    Hi,

    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 :
    “140%20Wallace%20…”
    Each blank is replaced by “%20″ so the API can’t find the right place. Any ideas to resolve this issue ?

    Regards,

  11. William says:

    It works ! The problem came from my browser..Works fine with IE but not with Chrome.

    Good to know. Thanks !

  12. Som says:

    Hi Ron,

    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!

    • Ron Keler says:

      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.

  13. Bethel Montera says:

    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
    http://www.caramoantourpackage.com

  14. Thomas Evans says:

    Seems API v2 is deprecated and keys are no longer availiable – I don’t suppose you have rewritten the html document against API v3?

  15. Carlos says:

    Hi Ron,
    I first thank you for your post
    wanted to ask the group if anyone has managed to convert the code to google maps V3 file5.html, since I’m a bit lost in javascript and I can not migrate around and work
    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

  16. Nauman Khan says:

    Hey Ron,
    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 naumank@ymail.com
    Thanks!! – Nauman.

    • Ron Keler says:

      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.

  17. Sushant says:

    Please update the existing code, to my knowlege api for google charts have also changed, can you please give us a working code.

  18. Pål R says:

    Hi
    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…

    Regards

    Pål

  19. Nick says:

    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?

    Thanks!
    Nick

    • Ron Keler says:

      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.

  20. Velu says:

    Hi,

    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.

    Regards,
    Velu.

    • Ron Keler says:

      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.

  21. Thomas Evans says:

    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?

  22. Mohanraj C Periyasamy says:

    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 :-))

  23. Gaurav says:

    Hi Ron,

    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?

    Regards,
    Gaurav

    • Ron Keler says:

      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…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>