Skip to content

Instantly share code, notes, and snippets.

@ikiw
Created July 22, 2015 13:45
Show Gist options
  • Save ikiw/cd1b098939f7ff7a8c7d to your computer and use it in GitHub Desktop.
Save ikiw/cd1b098939f7ff7a8c7d to your computer and use it in GitHub Desktop.
Google map Custom control
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>GoogleMap</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_goldreflection'
data-sap-ui-libs='sap.ui.commons,sap.ui.ux3'></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
// PART 1: define the new GoogleMap Control type
sap.ui.core.Control.extend("my.GoogleMap", {
metadata : {
properties : { // setter and getter are created behind the scenes, incl. data binding and type validation
latitude: "float",
longitude: "float",
address : "string"
}
},
init: function(){
this._html = new sap.ui.core.HTML({content:"<div style='height:100%;width:100%;' id='" + this.getId()+"-map'></div>"});
},
renderer : function(oRm, oControl) {
oRm.write("<div style='height:400px;width:400px;margin:18px;' ");
oRm.writeControlData(oControl); // writes the Control ID and enables event handling - important!
oRm.write(">");
oRm.renderControl(oControl._html);
oRm.write("</div>");
},
onAfterRendering : function() {
if (!this.initialized) { // after the first rendering initialize the map
this.initialized = true;
geocoder = new google.maps.Geocoder();
var options = {
zoom:12,
//center: new google.maps.LatLng(this.getLatitude(),this.getLongitude()),
mapTypeId: "roadmap"
};
var _map = new google.maps.Map(jQuery.sap.domById(this.getId()+"-map"),options);
geocoder.geocode( { 'address': this.getAddress()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
_map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: _map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
} else { // after subsequent rerenderings, the map needs to get the current values set
_map.setCenter(new google.maps.LatLng(this.getLatitude(),this.getLongitude()));
}
}
});
// PART 2: instantiate Control and place it onto the page
var myMap = new my.GoogleMap({
latitude:49.3,
longitude:8.64,
address:"London"
})
var oLayout = new sap.ui.commons.layout.MatrixLayout();
var oRow1 = new sap.ui.commons.layout.MatrixLayoutRow();
var oCell1 = new sap.ui.commons.layout.MatrixLayoutCell();
oCell1.addContent(myMap);
oRow1.addCell(oCell1)
oLayout.addRow(oRow1);
var oShell = new sap.ui.ux3.Shell("myShell", {
appTitle: "SAPUI5 Gold Reflection Shell"});
oShell.addContent(oLayout);
oShell.placeAt("content");
</script>
<style>
</style>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment