-
-
Save js1972/598143e82ba313ebf486 to your computer and use it in GitHub Desktop.
GoogleMap Example with Data Binding used// source http://jsbin.com/xavuhi
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html><head> | |
| <meta http-equiv='X-UA-Compatible' content='IE=edge' /> | |
| <title>GoogleMap Example with Data Binding used</title> | |
| <script id='sap-ui-bootstrap' type='text/javascript' | |
| src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js' | |
| data-sap-ui-theme='sap_bluecrystal' | |
| data-sap-ui-libs='sap.m'></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", { // call the new Control type "my.GoogleMap" and let it inherit from sap.ui.core.Control | |
| // the control API: | |
| metadata : { | |
| properties : { // setter and getter are created behind the scenes, incl. data binding and type validation | |
| latitude: "float", | |
| longitude: "float", | |
| zoom: { | |
| type: "int", | |
| defaultValue: 5 | |
| } | |
| } | |
| }, | |
| init: function(){ | |
| this._html = new sap.ui.core.HTML({content:"<div style='height:100%;width:100%;' id='" + this.getId()+"-map'></div>"}); | |
| }, | |
| // the part creating the HTML: | |
| renderer : function(oRm, oControl) { // static function, so use the given "oControl" instance instead of "this" in the renderer function | |
| 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>"); | |
| }, | |
| // an event handler: | |
| onAfterRendering : function() { | |
| if (!this.initialized) { // after the first rendering initialize the map | |
| this.initialized = true; | |
| var options = { | |
| zoom: this.getZoom(), | |
| center: new google.maps.LatLng(this.getLatitude(),this.getLongitude()), | |
| mapTypeId:"roadmap" | |
| }; | |
| this._map = new google.maps.Map(jQuery.sap.domById(this.getId()+"-map"),options); | |
| // for two-way binding: update position when user drags map | |
| var that = this; | |
| google.maps.event.addListener(this._map, 'center_changed', function() { | |
| var c = this.getCenter(); | |
| that.setProperty("longitude", c.lng(), true); | |
| that.setProperty("latitude", c.lat(), true); | |
| }); | |
| // same for zoom | |
| google.maps.event.addListener(this._map, 'zoom_changed', function() { | |
| that.setProperty("zoom", this.getZoom(), true); | |
| }); | |
| } else { | |
| // after subsequent rerenderings, the map needs to get the current values set | |
| this._map.setCenter(new google.maps.LatLng(this.getLatitude(),this.getLongitude())); | |
| } | |
| }, | |
| setZoom: function(zoomValue) { | |
| this.setProperty("zoom", zoomValue, true); // no rerendering required | |
| if (this.getDomRef()) { // if rendered, directly let the map zoom | |
| this._map.setZoom(zoomValue); | |
| } | |
| return this; | |
| } | |
| }); | |
| jQuery.sap.require("sap.ui.model.json.JSONModel"); | |
| var oModel = new sap.ui.model.json.JSONModel({ | |
| longitude: -122.5, | |
| latitude: 37.7, | |
| zoom: 10 | |
| }); | |
| sap.ui.getCore().setModel(oModel); | |
| // PART 2: instantiate Map control, bind properties and place it onto the page | |
| var myMap = new my.GoogleMap({ | |
| longitude:"{/longitude}", | |
| latitude:"{/latitude}", | |
| zoom: "{/zoom}" | |
| }).placeAt("content"); | |
| // PART 3: interact with the map | |
| new sap.m.Button({ | |
| text: "Get Current Location", | |
| press: function(){ | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| myMap.setLatitude(position.coords.latitude) | |
| .setLongitude(position.coords.longitude) | |
| .setZoom(13); | |
| }, function(){ | |
| alert("Error while determining position"); | |
| }); | |
| } | |
| } | |
| }).placeAt("content"); | |
| // PART 4: interact with the map using data binding | |
| new sap.m.Label({text: "Longitude:"}).placeAt("sliders"); | |
| new sap.m.Slider({ | |
| min: -180, | |
| max: 180, | |
| step: 0.1, | |
| value: "{/longitude}" | |
| }).placeAt("sliders"); | |
| new sap.m.Label({text: "Latitude:"}).placeAt("sliders"); | |
| new sap.m.Slider({ | |
| min: -90, | |
| max: 90, | |
| step: 0.1, | |
| value: "{/latitude}" | |
| }).placeAt("sliders"); | |
| new sap.m.Label({text: "Zoom:"}).placeAt("sliders"); | |
| new sap.m.Slider({ | |
| min: 1, | |
| max: 17, | |
| value: "{/zoom}" | |
| }).placeAt("sliders"); | |
| </script> | |
| </head> | |
| <body class='sapUiBody'> | |
| <div id='content'></div> | |
| <hr/> | |
| <div id='sliders'></div> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| </script></body> | |
| </html> | |
| <!-- user:d046011 --><!-- description:GoogleMap as Notepad Control --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Also see OpenUI5 doco on Control Libraries.
From Andreas Kunz presentation.