Skip to content

Instantly share code, notes, and snippets.

@js1972

js1972/ui5_googlemaps.html

Created September 17, 2015 01:03
Show Gist options
  • Save js1972/bc6961cfa5632745bdab to your computer and use it in GitHub Desktop.
Save js1972/bc6961cfa5632745bdab to your computer and use it in GitHub Desktop.
Download ZIP
Sample one-page MVC UI5 application in SAP HANA XS showing use of a map (googlemaps library).
Raw
ui5_googlemaps.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment