Element dasar dari semua aplikasi Google Map Api adalah "map atau peta" itu sendiri. Disini kita akan mempelajari mengenai dasar-dasar penggunaan dari object GMap2 dan operasi basic map/peta.
Cara termudah mempelajarinya adalah dengan melihat contoh sederhana di bawah ini. Web page dibawah ini akan menampilkan peta dengan ukuran 500x300 pixel, dimana titik tengah peta berada pada Palo Alto California:
Di contoh ini ada catatan yang harus kita ingat :
Loading Google Maps API
Map DOM Elements
GMap2 - Elementary Object
Untuk menampung object dari peta tersebut ke dalam elemen div, disini kita menggunakan method document.getElementById().
Variable map kita berikan nilai sebuah object dari class GMap2. Fungsi GMap2() adalah sebagai constructor dan definisinya.
Inisialisasi Map
Loading Map
Event onload adalah sebuah contoh dari event handler. Google Maps Api menyediakan beberapa events yang bisa anda gunakan untuk pengembangan anda.
Lihat Map Event dan Even Listener untuk informasi selanjutnya.
Fungsi GUnload() adalah utility untuk menangani memory leak
Selamat Mencoba.
Cara termudah mempelajarinya adalah dengan melihat contoh sederhana di bawah ini. Web page dibawah ini akan menampilkan peta dengan ukuran 500x300 pixel, dimana titik tengah peta berada pada Palo Alto California:
<!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>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Anda bisa lihat pada contoh di atas dan bisa meng-copy paste code diatas ke halaman anda, tapi anda harus mengganti map key nye dengan key yang sudah anda miliki(sudah di register).Di contoh ini ada catatan yang harus kita ingat :
- include MAPS API Javascript dengan menggunakan tag script
- membuat div element untuk manampung peta
- menulis fungsi javascript untuk membuat "map" object
- memberi titik tengah pada peta dengan geographic point yang sudah ada
- inisialisasi "map" object pada body tag dengan onLoad event
Loading Google Maps API
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
type="text/javascript"></script>URL ini http://maps.google.com/maps?file=api&v=2&key=abcdefg mengarah pada lokasi file Javascript yang berisikan semua simbol dan definisi yang anda perlukan dalam menggunakan Google Maps API. Halaman anda harus berisikan tag script yang megarah ke URL ini, dengan menggunakan key yang anda dapatkan pada saat anda mendaftar ke Google Maps API. Pada contoh diatas keynya adalah abcdefg.Map DOM Elements
<div id="map_canvas" style="width: 500px; height: 300px"></div>Untuk menampilkan map pada halaman web anda, anda harus menyediakan tempat untuk peta tersebut. Umumnya kita akan menggunakan div tag untuk menampungnya. Seperti contoh diatas, kita membuat sebuah div tag dengan nama "map_canvas", dan mereferensikan element ini ke Document Object Model (DOM).
GMap2 - Elementary Object
var map = new GMap2(document.getElementById("map_canvas"));Class javascript yang membuat peta itu ada adalah class GMap2. Object dari class ini akan menyediakan sebuah peta di halaman web anda (anda dapat membuat lebih dari satu instan dari class ini, setiap object akan di pisahkan di halaman anda). Kita membuat instan dari class ini dengan menggunakan Javascript operator new.
Untuk menampung object dari peta tersebut ke dalam elemen div, disini kita menggunakan method document.getElementById().
Variable map kita berikan nilai sebuah object dari class GMap2. Fungsi GMap2() adalah sebagai constructor dan definisinya.
Inisialisasi Map
map.setCenter(new GLatLng(37.4419, -122.1419), 13);Setelah kita membuat object, masih ada satu hal yang harus kita kerjakan, yaitu inisialisasi. Inisialisasi di selesaikan dengan menggunakan method setCenter(). Method setCenter() membutuhkan GetLatLng koordinat dan zoom level, dan method ini harus segera dikirim sebelum ada pengoperasian lain pada peta, termasuk seting atribut peta itu sendiri.
Loading Map
<body onload="initialize()" onunload="GUnload()">Ketika halaman HTML di render, document object model(DOM) sudah bisa digunakan, dan semua gambar external dan script diterima oleh object document. Untuk memastikan peta kita di muat sesudah halaman selesai dimuat oleh browser, maka kita hanya menjalankan ketika <body> halaman kita menerima event onload. Dengan begitu kita dapat menghindari hal-hal yang tidak terkira dan memberikan kita kontrol bagaimana dan kapan peta dimuat.
Event onload adalah sebuah contoh dari event handler. Google Maps Api menyediakan beberapa events yang bisa anda gunakan untuk pengembangan anda.
Lihat Map Event dan Even Listener untuk informasi selanjutnya.
Fungsi GUnload() adalah utility untuk menangani memory leak
Selamat Mencoba.
1 komentar:
Mas, Mau tanya nih, apa yang harus dilakukan jika kita ingin menambah peta, contoh nya peta indonesia di google map api kita.
Posting Komentar