Saat ini akan ditampilkan peta kota tepatnya jalan Malioboro, Yogyakarta. Ukuran peta yang digunakan adalah ukuran 500pixel x 300pixel. Sebelum dimulai kita harus survei dan didapat salah datu titik koordinat jalan Malioboro adalah -7.794182, 110.365537.
Berikut contoh simple, ada lima hal yang diperhatikan:
1. Kita memasukkan Map API JavaScript menggunakan sebuah tag script.
2. Kita membuat elemen div bernama "map_canvas" untuk menampilkan peta.
3. Kita membuat function JavaScript untuk membuat object “map”.
4. Kita menentukan titik tengah geografis dan seeting UI sebagai default konfigurasi.
5. Kita inisialisasi obyek peta dari tag body pada event onLoad.
Beginilah kode program dasarnya:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key= ABQIAAAAJK9VAl7f5EbkTYtTgYmfGRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSiZayCg1x-0OTg2PBrceaMzyZjNQ &sensor=true_or_false"
type="text/javascript"></script>
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-7.794182, 110.365537), 13);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-7.794182, 110.365537), 13);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Tidak ada komentar:
Posting Komentar