deskmap.html

<!DOCTYPE html>
<html>
<head>
<title>First Page</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 28%;
        z-index: 5;
        background-color: #fff;
        padding: 0px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 0px;
      }
      button{
        height="500px";
        width=30%;
      }
    </style>
</head>


<body>

<div id="map" style="width:20%%;height:25%;"></div>

</div>


<script type="text/javascript">
var map;
var markers = [];
var x = document.getElementById("demo");

function myMap() {
  var mapCanvas = document.getElementById("map");
  var myCenter=new google.maps.LatLng(28.7041,77.1025);
  var mapOptions = {center: myCenter, zoom: 5};
  var map = new google.maps.Map(mapCanvas, mapOptions);
  //google.maps.event.addListener(map, 'click', function(event) {
  
  placeMarker(map, myCenter);
    
  //});
}

function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
  
  markers.push(marker);
}
 

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4qG7WIi9ajrdWEJRZVYZLeV3YcrjEdg8&callback=myMap"></script>

</body>
</html>