OpenUI5 Control for Google Maps

This is an OpenUI5 Control for Google Maps, supporting binding to Models, this is the example code for the creation of a map and a markers layer bounded to a model.

Loading of modules:


	jQuery.sap.registerModulePath('mexbalia','src/');
	jQuery.sap.require('mexbalia.Maps.Polygon');
	jQuery.sap.require('mexbalia.Maps.MarkersLayer');

Creation of the templates for the aggregations in the Layers


	locationsTemplate = new mexbalia.Maps.Location({latitude:"{Latitude}",longitude:"{Longitude}"});
	markersTemplate = new mexbalia.Maps.Marker({latitude:"{Latitude}",longitude:"{Longitude}"});

Creation of the Map


	Map = new mexbalia.Maps.Map();

Creation of the layers Polygon and markersLayer


	Polygon= new mexbalia.Maps.Polygon({locations:{path:"/Markers",template:locationsTemplate}});
	markersLayer= new mexbalia.Maps.MarkersLayer({markers:{path:"/Markers",template:markersTemplate}});

Insertion of the layers into the map


	Map.insertLayer(markersLayer);
	Map.insertLayer(Polygon);

Setting of the model and placing in the <div> element


	Modelo = new sap.ui.model.json.JSONModel();
	Modelo.setData(LocationsData);
	Map.setModel(Modelo);
	Map.placeAt("map-canvas");

In this example the table is bounded to the same model in a two-way binding, any change in the values of the table changes the markers position. In this example I used the Markers and Polygon elements, the Polyline and Heatmap Layers are defined like Polygon, with a Location template

You can run this example with openUI5 downloading and extracting it in the openui5 folder.

Link to the example above

Contact

Twitter

christianlgr@gmail.com