Skip to content

Instantly share code, notes, and snippets.

@js1972

js1972/ui5_googlemaps.html

Created September 17, 2015 01:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save js1972/bc6961cfa5632745bdab to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save js1972/bc6961cfa5632745bdab to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. js1972 created this gist Sep 17, 2015.
    257 changes: 257 additions & 0 deletions ui5_googlemaps.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,257 @@
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">

    <title>Sample using the OpenUI5 googlemaps library</title>

    <script id="sap-ui-bootstrap"
    src="/sap/ui5/1/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m, sap.ui.layout"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-resourceroots='{
    "openui5.googlemaps": "googlemaps"
    }'>
    </script>

    <!-- XML-based view definition -->
    <script id="view1" type="sapui5/xmlview">
    <mvc:View
    controllerName="local.controller"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form"
    xmlns:c="sap.ui.core"
    xmlns:gmaps="openui5.googlemaps">

    <!--
    Form needs to be set to editable for proper label alignment.
    See http://stackoverflow.com/questions/28981312/vertical-label-alignment-in-sapui5-label-too-high
    -->
    <f:Form id="form1" editable="true">
    <f:title>
    <c:Title text="Map Search"></c:Title>
    </f:title>
    <f:formContainers>
    <f:FormContainer>
    <f:formElements>
    <f:FormElement>
    <f:label>
    <Label text="Query Address" />
    </f:label>
    <f:fields>
    <Input id="query" showSuggestion="true" suggest="onSuggest" change="onChange">
    <layoutData>
    <l:GridData span="L3 M6 S12" />
    </layoutData>
    </Input>
    <Button text="My Location" press="onMyLocation">
    <layoutData>
    <l:GridData span="L2 M2 S12" />
    </layoutData>
    </Button>
    </f:fields>
    </f:FormElement>

    <f:FormElement>
    <f:label>
    <Label text="Latitiude / Longitude" />
    </f:label>
    <f:fields>
    <Input value="{lat}">
    <layoutData>
    <l:GridData span="L2 M4 S8"></l:GridData>
    </layoutData>
    </Input>
    <Input value="{lng}">
    <layoutData>
    <l:GridData span="L2 M4 S8"></l:GridData>
    </layoutData>
    </Input>
    </f:fields>
    </f:FormElement>

    <f:FormElement>
    <f:fields>
    <gmaps:Map
    width="600px"
    height="400px"
    mapTypeControl="true"
    zoom="12"
    lat="{lat}"
    lng="{lng}"
    markers="{/places}">

    <gmaps:markers>
    <gmaps:Marker
    lat="{markerLat}"
    lng="{markerLng}"
    info="{name}"
    icon="http://www.w3schools.com/googleapi/pinkball.png"
    animation="0"
    draggable="true"
    dragEnd="onMarkerDragEnd" />
    </gmaps:markers>

    <gmaps:layoutData>
    <l:GridData span="L8 M12 S12"></l:GridData>
    </gmaps:layoutData>
    </gmaps:Map>
    </f:fields>
    </f:FormElement>
    </f:formElements>
    </f:FormContainer>
    </f:formContainers>
    <f:layout>
    <f:ResponsiveGridLayout></f:ResponsiveGridLayout>
    </f:layout>
    </f:Form>

    </mvc:View>
    </script>

    <script>

    sap.ui.getCore().loadLibrary("googlemaps", "googlemaps");

    // Controller definition
    sap.ui.controller("local.controller", {

    onInit: function(oEvent) {
    this.util = openui5.googlemaps.MapUtils;

    // Initial place marker
    var places = [{
    name: "Bondi Beach",
    lat: -33.890542,
    lng: 151.274856,
    markerLat: -33.890542,
    markerLng: 151.274856
    }];

    this.oModel = new sap.ui.model.json.JSONModel();

    this.oModel.setData({
    places: places
    });

    sap.ui.getCore().setModel(this.oModel);

    this.oContext = this.oModel.getContext('/places/0/');
    this.byId("form1").setBindingContext(this.oContext);
    },

    /*
    Lookup address as we type (after 3 chars). List of results is
    presented to the callback.
    */
    onSuggest: function(oEvent) {
    var sValue = oEvent.getParameter("suggestValue");
    if (sValue.length > 3) {
    this.util.search({
    "address": sValue
    }).done(jQuery.proxy(this.searchResults, this));
    }
    },

    /*
    Get the new value in the query address input field and change
    the model.
    */
    onChange: function(oEvent) {
    if (oEvent) {
    var val = oEvent.getParameters("newValue").newValue;
    var oCtxt = oEvent.getSource().getBindingContext();
    this.locations.forEach(function(oLocation) {
    if (oLocation.value === val) {
    oCtxt.getModel().setProperty("lat", oLocation.lat, oCtxt);
    oCtxt.getModel().setProperty("lng", oLocation.lng, oCtxt);
    oCtxt.getModel().setProperty("markerLat", oLocation.lat, oCtxt);
    oCtxt.getModel().setProperty("markerLng", oLocation.lng, oCtxt);
    oCtxt.getModel().setProperty("name", oLocation.value, oCtxt);
    }
    });
    }
    },

    /*
    Suggestions callback function which shows the user all the
    matching suggestions.
    We can probably bind to this resultset directly in the XML
    view, but I haven't tried yet.
    */
    searchResults: function(results, status) {
    var that = this;
    this.locations = [];

    this.locations = jQuery.map(results, function(item) {
    var location = {};
    location.value = item.formatted_address;
    location.lat = item.geometry.location.lat();
    location.lng = item.geometry.location.lng();
    return location;
    });

    var queryInput = this.byId("query");
    queryInput.removeAllSuggestionItems();
    this.locations.forEach(function(item) {
    queryInput.addSuggestionItem(new sap.ui.core.ListItem({
    text: item.value
    }));
    });
    },

    /*
    Update model with location and return a lat/long object
    */
    getLocation: function(oPos) {
    this.oModel.setProperty("lat", oPos.lat, this.oContext);
    this.oModel.setProperty("lng", oPos.lng, this.oContext);
    this.oModel.setProperty("markerLat", oPos.lat, this.oContext);
    this.oModel.setProperty("markerLng", oPos.lng, this.oContext);
    this.oModel.setProperty("name", "My Location", this.oContext);
    return this.util.objToLatLng(oPos);
    },

    updateLocation: function(sLocation) {
    this.oModel.setProperty(this.oContext.getPath() + "name", sLocation);
    this.byId("query").setValue(sLocation);
    },

    /*
    When My Location button is pressed, get the current location
    from Google, then geocode it, then update the mmodel and
    address query input element.
    */
    onMyLocation: function(oEvent) {
    this.util.currentPosition()
    .then(this.getLocation.bind(this))
    .then(this.util.geocodePosition)
    .done(this.updateLocation.bind(this));
    },

    /*
    On marker drag end
    */
    onMarkerDragEnd: function(oEvent) {
    this.util.geocodePosition(oEvent.getParameters().position).done(this.updateLocation.bind(this));
    }

    });

    // Instantiate the View
    var oView = sap.ui.xmlview({
    viewContent: jQuery("#view1").html()
    });

    oView.placeAt("content");

    </script>
    </head>

    <body class="sapUiBody" role="application" id="content">
    </body>
    </html>