SAP Header and Google maps in SAP UI5 grid

Hi All,

My requirement is to display the Google Maps and SAP Header in index.html file. The following is the code been used to display the required:

Index.html

<script>

     sap.ui.localResources("sapui5");

     var page1 = sap.ui.view({id:"id1", viewName:"sapui5.SAPUIControl", type:sap.ui.core.mvc.ViewType.JS});

     page1.placeAt("content");

</script>

<table border="1">

<tr>

<th><div id="content"/></th>

</tr>

<tr>

<th><div id="mapone"/></th>

</tr>

</table>

  SAPUIControl.js

createContent : function(oController) {

     //alert('landing');

    var oLayout1 = new sap.ui.commons.layout.AbsoluteLayout({width:"100%",height:"840px"});

    var oAppHeader1 = new sap.ui.commo

ns.ApplicationHeader("appHeader");

  //configure the branding area

  oAppHeader1.setLogoSrc("http://www.sap.com/global/images/SAPLogo.gif");

  oAppHeader1.setLogoText("SAP SAPUI5 Library");

  //configure the welcome area

  oAppHeader1.setDisplayWelcome(true);

  oAppHeader1.setUserName("vijay");

  //configure the log off area

  oAppHeader1.setDisplayLogoff(true);

  oLayout1.addContent( oAppHeader1,{left: "0px", top: "0px"} );     

  oAppHeader1.placeAt("content");   

  var mapOptions = {

           zoom: 18,

           center: new google.maps.LatLng(52.41240, -1.78167),

           mapTypeId: google.maps.MapTypeId.HYBRID,heading: 90,

           tilt: 45

         };

      var map = new google.maps.Map(document.getElementById('mapone'),mapOptions);

        google.maps.event.addDomListener(window, 'load', initialize);

     //Layout1.addContent( map,{left: "0px", top: "0px"} );

     oLayout1.addContent( map,{left: "70px", top: "580px"});

     map.placeAt("mapone");

  return oLayout1;

      }

With the above code it is getting overwritten, please suggest the way forward to display SAP header & Google Maps

Thanks,

Mano