rifki/gist:3798636

## gistfile1.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 500px }
      body { height: 500px; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=KEY_DISINI&sensor=true">
    </script>

    <script type="text/javascript">
      // initialize
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-6.914744, 107.609811),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      }
      // loadScript
      function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.googleapis.com/maps/js?key=KEY_DISINI&sensor=true&callback=initialize";
        document.body.appendChild(script);
      }

      // Ubah ke Hybrid
      function ubahHybrid() {
        var mapOptions = {
          center: new google.maps.LatLng(-6.914744, 107.609811),
          zoom: 8,
          title: 'Hybrid',
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      }

      // Kembali ke default normal.
      function ubahStandard() {
        var mapOptions = {
          center: new google.maps.LatLng(-6.914744, 107.609811),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      }

      // Ubah ke Satellite
      function ubahSatellite() {
        var mapOptions = {
          center: new google.maps.LatLng(-6.914744, 107.609811),
          zoom: 18,
          mapTypeId: "satellite"
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        map.setTilt(45);
      }

       // Ubah ke Terrain
      function ubahTerrain() {
        var mapOptions = {
          center: new google.maps.LatLng(-6.914744, 107.609811),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      }

      window.onload = loadScript;
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:500; height:500"></div>
      <table border="10">
        <tr>:::Pengaturan:::<td>
        <button name="Standard" onclick="ubahStandard()">Standard</button>
        <button name="Hybrid" onclick="ubahHybrid()">Hybrid</button>
        <button name="Hybrid" onclick="ubahSatellite()">Satellite</button>
        <button name="Hybrid" onclick="ubahTerrain()">Terrain</button>
        </tr></td>
      </table>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 500px }
	body { height: 500px; margin: 0; padding: 0 }
	#map_canvas { height: 100% }
	</style>
	<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=KEY_DISINI&sensor=true">
	</script>

	<script type="text/javascript">
	// initialize
	function initialize() {
	var mapOptions = {
	center: new google.maps.LatLng(-6.914744, 107.609811),
	zoom: 8,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	}
	// loadScript
	function loadScript() {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "http://maps.googleapis.com/maps/js?key=KEY_DISINI&sensor=true&callback=initialize";
	document.body.appendChild(script);
	}

	// Ubah ke Hybrid
	function ubahHybrid() {
	var mapOptions = {
	center: new google.maps.LatLng(-6.914744, 107.609811),
	zoom: 8,
	title: 'Hybrid',
	mapTypeId: google.maps.MapTypeId.HYBRID
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	}

	// Kembali ke default normal.
	function ubahStandard() {
	var mapOptions = {
	center: new google.maps.LatLng(-6.914744, 107.609811),
	zoom: 8,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	}

	// Ubah ke Satellite
	function ubahSatellite() {
	var mapOptions = {
	center: new google.maps.LatLng(-6.914744, 107.609811),
	zoom: 18,
	mapTypeId: "satellite"
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	map.setTilt(45);
	}

	// Ubah ke Terrain
	function ubahTerrain() {
	var mapOptions = {
	center: new google.maps.LatLng(-6.914744, 107.609811),
	zoom: 8,
	mapTypeId: google.maps.MapTypeId.TERRAIN
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	}

	window.onload = loadScript;
	</script>
	</head>
	<body onload="initialize()">
	<div id="map_canvas" style="width:500; height:500"></div>
	<table border="10">
	<tr>:::Pengaturan:::<td>
	<button name="Standard" onclick="ubahStandard()">Standard</button>
	<button name="Hybrid" onclick="ubahHybrid()">Hybrid</button>
	<button name="Hybrid" onclick="ubahSatellite()">Satellite</button>
	<button name="Hybrid" onclick="ubahTerrain()">Terrain</button>
	</tr></td>
	</table>
	</body>
	</html>