Skip to Content
avatar image
Former Member

How to display google maps in sapui5 mobil

Hi All,

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

refered below links,css,js,output,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", {


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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Nov 16, 2016 at 08:30 PM


    Better wrap the gmaps library in UI5 controls or just use this blog:

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

    Hope that helps.

    Best regards


    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 20, 2016 at 04:29 PM

    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

    but no luck :(

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Nov 21, 2016 at 10:36 AM

    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 :


    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();


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



    <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:Marker lat="{latitude}" lng="{longitude}" info="{info}" />





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




    Add comment
    10|10000 characters needed characters exceeded

  • Nov 21, 2016 at 10:42 AM

    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:

    It is in self-learning mode.

    Add comment
    10|10000 characters needed characters exceeded