ikiw/googleMapNotepad.js

## googleMapNotepad.js
<!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>
	<!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>