Tutorial Google Map API : Membuat Peta lokasimu sendiri

Google Map API merupakan aplikasi interface yang dapat diakses lewat javascript agar Google Map dapat ditampilkan pada halaman web yang akan dibangun. Untuk dapat mengakses dan menampilkan Google Map pada web maka dibutuhkan sebuah API Key terlebih dahulu, dimana API Key ini didapatkan dengan cara login/signup terlebih dahulu dan menggunakan akun di Google/Gmail untuk mendaftarkan alamat web yang akan dibangun sebagai tempat ditampilkannya peta dari Google Map tersebut.

Untuk mencoba tutorial berikut yang harus kamu siapkan adalah :

1. Sebuah Akun google (gmail)
2. Pengetahuan dasar html
3. Pengetahuan dasar JavaScript

Setelah memiliki sebuah akun google/gmail (tentunya) yang pertama kita mesti lakukan adalah mendapatkan Google Map API Key , dimana Map API adalah berisi sebaris kode yang nantinya akan kita gunakan untuk menampilkan peta google di halaman web yang kita buat. Untuk mendapatkan API Key tsb kamu harus login terlebih dahulu menggunakan akun google melalui gmail setelah itu Gnerate API KEYmu melalui link berikut http://www.google.com/apis/maps/signup.html .

Pada My web site URL isikan URL web yang akan kita daftarkan (alamat web kita yang akan kita gunakana untuk menampilkan peta), oiya ingat satu API Key hanya dapat digunakan pada satu URL web jadi API Key yang sudah kita daftarkan di suatu URL web tidak akan dapat kita pindahkan ke URL atau alamat web lainya.

Setelah kita masukan alamat web kita pada kotak my web site URL dan klik generate API Key maka API Key yang kita butuhkan akan muncul. Akan muncul 3 macam API KEY yakni :

1. JavaScript Maps API Example
2. Maps API for Flash Example
3. HTTP Service Example

Karena kita akan membuat sebuah halaman web maka API KEY yang akan kita gunakan adalah API KEY yang pertama “JavaScript Maps API” kemudian kopi APY key tersebut dan taruh di halaman web kita beserta kode program untuk menampilkan petanya (google map api).

Contoh API KEY yang saya dapatkan adalah

Dan berikut ini adalah scripts (sederhana) program Google Map API untuk menampilkan peta google di web kita:

<!DOCTYPE html PUBLIC "-//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=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ6f9Y9CoQLM6VWsH3nUSZMbXzTABT_N_xWHEj5W3IG7a02rRAUMmH33A"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-7.797224,110.368797), 17);
map.setMapType(G_HYBRID_MAP);

map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());

var marker = new GMarker(new GLatLng(-7.797224,110.368797));
map.addOverlay(marker);
marker.openInfoWindowHtml("<img src='http://static.kaskus.us/images/smilies/cystg.gif' width='70' height='50'/> <br/> Kota Yogyakarta<br/>titik koordinat latitude/longitude yang kamu masukan disini ");
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>

Kemudian Simpan script tersebut ke dalam format html atau php kemudian upload ke web hosting kamu.. setelah itu buka web tersebut secara online dan lihat hasilnya , peta rumah kamu sudah ditandai dan ditampilkna dalam bentuk peta google .

Keterangan Script:

1. Google Map API Key

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ6f9Y9CoQLM6VWsH3nUSZMbXzTABT_N_xWHEj5W3IG7a02rRAUMmH33A"
type="text/javascript"></script>
<script type="text/javascript">

Script diatas adalah google Map API Key nya.

2. Titik tengah koordinat :

map.setCenter(new GLatLng(-7.797224,110.368797), 17);

Script diatas berarti saat peta pertama kali dibuka titik tengah peta akan berada di koordinat -7.797224,110.368797 (Koordinate kota Yogyakarta) dengan zoom 17.

Bagaimana cara mendapatkan koordinat rumah saya?

buka saja http://maps.google.com.
Klik my place
Dibawahnya akan muncul alamat lokasi kamu (pilih lokasi tsb dan peta akan mengarah ke lokasi tsb)
Pada pojok kanan atas klik icon link
Lihat link yang diatas akan muncul : http://maps.google.com/maps/myplaces?hl=en&ll=-7.811153,110.363846&spn=0.010672,0.01929&sll=37.0625,-95.677068&sspn=23.875,57.630033&vpsrc=0&ctz=-420&z=16&iwloc=A
Pada script diatas Koordinat lokasinya adalah -7.811153,110.36384

3. Komponen-komponen dalam peta :

map.setMapType(G_HYBRID_MAP);

artinya >> pertama kali map dibuka akan ditampilkan dalam mode hybrid (citrasatelit)

map.addControl(new GSmallMapControl());

>> Map control diaktifkan (tanda untuk menggeser-geser peta)

map.addControl(new GScaleControl());

>> Scale control diaktifkan (tanda untuk zoom in / zoom out peta)

map.addControl(new GMapTypeControl());

>> Map type control diaktifkan (pilihan untuk menampilkan peta dalam mode hybrid, satelit, atau map2d)

map.addControl(new GOverviewMapControl());

>> Mapp overview diaktifkan untuk melihat peta dari jarak lebih jauh (ada dibagian pojok kanan bawah)

4. Letak Marker

var marker = new GMarker(new GLatLng(-7.797224,110.368797));

>> Sebuah marker terletak di titik -7.797224,110.368797

marker.openInfoWindowHtml("<img src='http://static.kaskus.us/images/smilies/cystg.gif' width='70' height='50'/> <br/> Kota Yogyakarta<br/>titik koordinat latitude/longitude yang kamu masukan disini ");

>> Script diatas untuk menambahkan Info marker berupaa gambar dan teks

5. Ukuran Peta

<div id="map" style="width: 800px; height: 600px"></div>

>> Ukuran peta 800x600px

Hasilnya akan terlihat seperti pada link berikut :
http://fbox.freetzi.com/files/mappost13.html

Coming Soon !

Tutorial Google Map API ( SQL / PHP ): mengambil data dari database dan menampilkan sebagai marker .

febri says:

12 Maret 2012 pukul 01.18

Wah makasih banyak mas tutorial2nya, sangat membantu tugas saya yg kebetulan tentang gmaps, oiya untuk tutorial yg berjudul "Tutorial Google Map API ( SQL / PHP ): mengambil data dari database dan menampilkan sebagai marker" sangat saya tunggu mas :)

[h] says:

13 Maret 2012 pukul 20.11

@febri : yup sama2.. "Tutorial Google Map API ( SQL / PHP )" tayang perdana di layar monitor leptopmu pertengahan tahun 2012 (kya film aja):D.. tar deh gampang (soalnya lg males nulis2).. khhe