Go.Blog For All

Google Map API II

2008-11-12T17:41:00.000-08:00

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:

<!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&amp;v=2&amp;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

5 catatan ini akan dijelaskan sebagai berikut :

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.

Google Map API I

2008-11-06T23:24:00.000-08:00

Google Map Api adalah tool yang digunakan agar kita bisa menggunakan Google Maps di website kita melalui javascript.

Kita bisa menempatkan posisi suatu tempat di peta yang selanjutnya disebut MARKERS, seperti yang kita lihat di Google Maps.
Google Map Api dapat digunakan di web site apa saja, oleh siapa saja secara gratis.

Sayangnya Indonesia tidak termasuk dalam Google Map coverage
untuk melihat negara mana saja yang termasuk dalam Google Map coverage, lihat disini http://gmaps-samples.googlecode.com/svn/trunk/mapcoverage_filtered.html

Browser yang bisa menjalankan Google Map Api :

IE 6.0+
Firefox 2.0+
Safari 3.1+

Cara Kerja Google Maps Key
Sebelum kita lanjutkan lebih dalam, kita harus mempunyai google map key dimana map key ini merupakan kunci untuk mengakses Google Map API.
Untuk membuat Maps Key, kita harus sign in ke Google Account. Kita bisa membuat map key sebanyak-banyaknya dengan menggunakan satu account.

Anda juga disarankan untuk mendaftarkan domain anda, karena satu map key hanya bisa dipakai pada satu domain.

Sebagai contoh jika anda membuat satu map key dengan domain http://www.mygooglemapssite.com/, map key anda bisa digunakan oleh :

http://www.mygooglemapssite.com/
http://www.mygooglemapssite.com/mysite/

Namun map key ini tidak bisa digunakan oleh :

http://mygooglemapssite.com/
http://host1.mygooglemapssite.com/
http://host2.mygooglemapssite.com/mysite

Dalam tahap pengembangan, map key akan di lewati jika terdeteksi dari desktop. Tapi jika anda bekerja menggunakan localhost, disarankan untuk mendaftarkan juga untuk http://localhost.

Bersambung Google Map Api II.......

Script costum dialog box gratis

2008-10-25T21:10:00.000-07:00

Lagi ada tugas nih, boss maunya yang aneh-aneh saja. Padahal saya kan baru di bidang ini. Boss maunya dialog box/modal box layer style, maksudnya di dialog box itu kita tampilkan file .php dengan ajax. Pernah sih lihat web dengan tampilan seperti itu, tapi scriptnya di compress, jadi susah deh bacanya.

Mau bikin sendiri, kayaknya susah banget deh. Mendingan tanya ama profesor GOOGLE, pasti dia tau. Setidaknya ada petunjuk dikit ato contoh ato script gratisan hehehehehhee.......
Akhirnya dapet juga, yang ini gratis lho
http://www.wildbit.com/labs/modalbox/

tampilannya juga lumayan, ada transisinya, overlay opacity juga bisa diatur
cara pakainya juga gampang

Tambahkan file javascript di bawah ini di halaman anda:

<script type="text/javascript" src="includes/prototype.js"> </script>
<script type="text/javascript" src="includes/scriptaculous.js?
load=effects"></script>
<script type="text/javascript" src="includes/modalbox.js"> </script>

Tambahkan file css berikut modalbox.css di halaman anda:

<link rel="stylesheet" href="includes/modalbox.css" type="text/css"
media="screen" />

Contoh simple, misalnya anda ingin membuat konfirmasi pada saat menghapus sesuatu :

Modalbox.show('<div class=\'warning\'><p>Are you sure to delete this¬
item?</p> <input type=\'button\' value=\'Yes, delete!\'¬
onclick=\'Modalbox.hide()\' /> or <input type=\'button\'
value=\'No, leave it!\' onclick=\'Modalbox.hide()\' /></div>',¬
{title: this.title, width: 300}

Contoh simple, misalnya anda ingin menampilkan file anda pada dialog box tersebut :

<a href="_ajax_form.html" title="Modalbox without transitions" ¬
onclick="Modalbox.show(this.href, {title: this.title, transitions: false}); ¬
return false;">Modalbox with ajax</a>

Dan banyak lagi contoh-contoh yang ada disana, terlampir di dalam package.

Selamat mencoba