<!DOCTYPE html>
<html>
<head>
<style>
#div-googleMaps {
height: 500px !important;
width:500px !important;
}
</style>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfJTVKnpLl0ULuuwDuix-9ANpyQhP6mfc&callback=initMap" type="text/javascript"></script>
<script>
var googleMapLoad = function () {
//FOR ROADMAP VIEW
var mapROADMAP = {
center: new google.maps.LatLng(-33.785809, 151.121195),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//FOR SATELLITE VIEW
var mapSATELLITE = {
center: new google.maps.LatLng(26.9270, 83.7137),
zoom: 16,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
//FOR HYBRID VIEW
var mapHYBRID = {
center: new google.maps.LatLng(26.9270, 83.7137),
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID
};
//FOR TERRAIN VIEW
var mapTERRAIN = {
center: new google.maps.LatLng(26.9270, 83.7137),
zoom: 16,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var sample = document.getElementById("div-googleMaps");
var map = new google.maps.Map(sample, mapROADMAP);
//THE MAP'S GETTILT() METHOD WILL ALWAYS REFLECT THE CURRENT TILT BEING SHOWN ON THE MAP;
//IF YOU SET A TILT ON A MAP AND THEN LATER REMOVE THAT TILT (BY ZOOMING THE MAP OUT, FOR EXAMPLE), THE MAP'S GETTILT() METHOD WILL RETURN 0.
map.setTilt(45);//SET TILT 45 FOR MAP
map.getClickableIcons(); //GET CLICKABLE ICONS ON MAPS
}
</script>
</head>
<body onload="googleMapLoad()">
<div id="div-googleMaps"></div>
</body>
</html>
// Code goes here
/* Styles go here */