Skip to Content
0

How to display google maps in sapui5 mobil

Nov 16, 2016 at 08:05 PM

304

avatar image

Hi All,

I am trying to display google maps in sapui5(mobile) with XML views

refered below links

http://jsbin.com/rowib/1/edit?html,css,js,output

http://jsbin.com/zetel/1/edit?html,js

how to load Google maps library and ref in controller

In we can load as index.html

>

I have placed button in zview.view.xml and when button press i want to display map in zview. related code is written in controller

code in controller

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function(Controller) { "use strict";

return Controller.extend("zmaaps.controller.View1", {

onpress:function(){

var latlng = new google.maps.LatLng(35.681382, 139.766084);

}

getting error : google is not defined

Note:Moderators : If this is not related place please let me know the path to post . As SCN page has changed . I have searched in tags did not find any relevant tags for sapui5

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

Daniel Degraf
Nov 16, 2016 at 08:30 PM
0

Hi,

Better wrap the gmaps library in UI5 controls or just use this blog: https://blogs.sap.com/2014/07/01/google-maps-library-for-ui5/

The author already did awesome work in wrapping a few APIs.

Hope that helps.

Best regards

Daniel

Share
10 |10000 characters needed characters left characters exceeded
Hari kumar Nov 20, 2016 at 04:29 PM
0

Hi Daniel, Thanks for your time.

I am a beginner and taking foot steps in learning sapui5 in WEBIDE do not under stand how to use above link. I have upload the Zip file of above link . I see may .js files I do not understand which file to consideras startup step . I took an exmple from W3 schoolds also

http://www.w3schools.com/graphics/tryit.asp?filename=trymap_intro

but no luck :(

Share
10 |10000 characters needed characters left characters exceeded
Phillip Morgan Nov 21, 2016 at 10:42 AM
0

Hi Hari,

I have taken the SAPui5 course and we did an exercise there to show a google map based on text from a nearby field. As far as I can remember this was all done in xml. You could skim through the lessons and material and find the exercise. Or better yet, take the course. It is free.

See here: https://open.sap.com/courses/ui51

It is in self-learning mode.

Share
10 |10000 characters needed characters left characters exceeded
VIPLOVE KHUSHALANI Nov 21, 2016 at 10:36 AM
0

Hi Hari ,

Actually Daniel is correct instead of going for the javascript way of including google maps (through API) you can download the zip include that in your project. As the wrapped one follow MVC rules and is written very much similar to other sap controls . I am also using same in my project too.

Below is just what i did according to my requirement , you can change according to you :

main.controller.js

sap.ui.getCore().loadLibrary("openui5.googlemaps", "ExternalLib/MapsLib/Maps/openui5/googlemaps/"); //you need to include the downloaded zip file in your project in my case i included in the path mentioned here

if(!this.gmap){ this.gmap = sap.ui.xmlfragment("<namespace>.fragments.GoogleMap", this); }

var oGModel = new sap.ui.model.json.JSONModel();

oGModel.loadData("JSONFile/MyGarageVendors.json");

this.getView().byId("MyGarageNavCont").setModel(oGModel); this.gmap.setModel(oGModel);

this.getView().byId("MyAccountAddon").addContent(this.gmap);

GoogleMap.fragment.xml

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:gmaps="openui5.googlemaps" xmlns:mvc="sap.ui.core.mvc"> <gmaps:Map height="300px" zoom="16" markers="{/vendors}" id="gmap">

<gmaps:markers>

<gmaps:Marker lat="{latitude}" lng="{longitude}" info="{info}" />

</gmaps:markers>

</gmaps:Map>

</core:FragmentDefinition>

main.view.xml

<l:HorizontalLayout id="MyAccountAddon" width="100%" >

</l:HorizontalLayout>

thanks

Viplove

Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Viplove,

Thanks for your time.

I tried to load openui5/googlemaps/....folder and when ran the app it is giving dump unable to load openui5/googlemaps/....

which part of openui5/googlemaps/...js should i need consider.

0

Hi Hari ,

this is how(screenshot) i have included the maps downloaded library and above reply code is what i have written in my controllers and views . Please compare yours with mine accordingly

thanks

Viplove

0