cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

SAPUI5 Mobile & Google Map

Former Member

on ‎03-11-2014 3:35 PM

0 Kudos

Using SAPUI5 in Eclipse and showing the google map is proving to be a big challenge. Note that when I created the SAPUI5 project in Eclipse, I selected the "Mobile" framework and not the "Desktop" framework and using Javascript.

Below is the snippet of what I have in the index.html:

<head>

              <meta http-equiv="X-UA-Compatible" content="IE=edge">

                 <script src="resources/sap-ui-core.js"

                      id="sap-ui-bootstrap"

                      data-sap-ui-libs="sap.m"

                      data-sap-ui-theme="sap_bluecrystal" >

              </script>

              <!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->

              <script src="http://maps.google.com/maps/api/js?v=3&sensor=true&region=CA&zoom=13&size=680x680&center=50.44472591..." type="text/javascript"></script>

                 <script>

                     sap.ui.localResources("outagefindersapui5mobile");

                     var app = new sap.m.App({initialPage:"idOutageFinder1"});

                     var page = sap.ui.view({id:"idOutageFinder1", viewName:"outagefindersapui5mobile.OutageFinder", type:sap.ui.core.mvc.ViewType.JS});

                     app.addPage(page);

                     app.placeAt("content");

              </script>

       </head>

<body class="sapUiBody" role="application">

              <div id="content"></div>

              <script>

                  outagefinder.outageMap = new google.maps.Map(document.getElementById('content'), {

                    zoom: 7,

                    center: new google.maps.LatLng(50.4447259142307,-104.60932810886),

                    mapTypeId: google.maps.MapTypeId.ROADMAP

                  });

                 

              </script>

       </body>

My goal is to show this map upon page load.  I have this working without all the SAPUI5, from a test project so theoretically, this should work per HTML5 standard.  What am I missing?  Thanks.  I dont' have anything in the controller and view file.  This is still just barebone SAPUI5 project.

Any help is greatly appreciated.

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (2)

Answers (2)

avital_ben-natan
Explorer
‎05-04-2014 2:15 PM
0 Kudos

Hi Jay,

You may want to look here. I've shared on GitHub a custom control for displaying Here/Nokia maps. However, it could be very easily adapted to use Google Maps API.

Show replies
Show replies
Former Member
‎05-06-2014 2:30 PM
0 Kudos

Thanks for the reply Avital.

I was able to use the XML style from SAPUI5 project and, with a little tweak and there, was able to make my map work.  However, that brings to question, why only does this work with XML and not Javascript?

I'm not bias towards any style, either HTML, XML or Javascript.  I think that's all developer preference.  But either way one takes, in my humble opinion, it should work either way.

But thanks for the reply, truly appreciate the help.

J

avital_ben-natan
Explorer
‎05-07-2014 7:31 AM
0 Kudos

You can choose the one that best fits you from the three and they should work identically.

People usually run into trouble with module wiring, when transitioning from templates (XML, HTML) and JavaScript views or vice-versa. As a long time user of SAPUI5 I've been using JS view exclusively in the not so distant past. The reason I like the XML templating specifically, is that it provides a cleaner approach to development (keeps logic in the controllers and the views as pure readable presentation definition). It also provides a short and concise syntax as well as complex property binding syntax not provided by JS (and I believe HTML) views, and including HTML in your view is as easy as writing HTML.

That said, I'de be glad to help you with loading your own map in a JS view. Would it help if I included a JS view in my own project?

Former Member
‎03-11-2014 4:58 PM
0 Kudos

Have you already checked the source-code I have provided here:

??

Show replies
Show replies
Former Member
‎03-11-2014 5:12 PM
0 Kudos

Thanks for the response.  I did look at that and still no map showing on screen.

My view.js:

createContent : function(oController) {

         

        var outageMapPage =  new sap.m.Page({

              title: "Outage Finder",

              content: new sap.ui.core.HTML({

                  content:'<div id="map_canvas" style="width:100%; height:400px;"></div>',

             })

        });

         

         //Register app for connection id, get initial 24 hours outages

         oController.initialize();

         //outagefinder.plotMap();

        return outageMapPage;

        

      }

My controller.js:

outagefinder.outageMap = new google.maps.Map($("#map_canvas").get(0), {

          zoom: 7,

          center: new google.maps.LatLng(50.4447259142307,-104.60932810886),

          mapTypeId: google.maps.MapTypeId.ROADMAP

        });

Ask a Question