<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDdIlaRp0Dm8cEP8oXZ_8HLuj_zpccK7gw&sensor=true"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, //mapTypeId: google.maps.MapTypeId.ROADMAP mapTypeId: google.maps.MapTypeId.SATELLITE //mapTypeId: google.maps.MapTypeId.HYBRID //mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDdIlaRp0Dm8cEP8oXZ_8HLuj_zpccK7gw&sensor=true&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript; //google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas" style=" 60%; height: 80%"/> </body> </html>