Tutorial Membuat Google MAP API

Untuk memenuhi tugas mata kuliah Pemprograman API, maka saya mempublikasikannya sebagai reverensi teman2

langsung saja .

Untuk mencoba tutorial berikut yang harus kamu siapkan adalah :

1. Sebuah Akun google (gmail)
2. Mendaftar google developer console
3. Pengetahuan dasar JavaScript

Langkah 1
Hal pertama yang perlu kamu lakukan adalah membuat email gmail agar dapat masuk ke akun Google Developers Console. Setelah email siap, silahkan masuk ke Google Developers Console

Langkah 2
Buat project baru dengan cara klik Create Project dan masukan nama projectnya – lalu CreateSetelah project berhasil dibuat sekarang kamu klik projectnya kemudian akan keluar halaman seperti berikut :

Saya telah lama menggunakan project ini bahkan sebelum tampilan Google Developers Console berubah, jadi jangan bingung dengan gambar grafik diatas. Lanjut saja pada langkah berikutnya.

Langkah 3
Masuk pada menu APIs & auth – APIs. Akan terlihat halaman sebagai berikut :

Pada ketegori Google Maps APIs pilih Google Maps Javascript API maka akan menuju ke halaman baru. Silahkan kamu klik tombol Enable API di pojok kiri atas. Sampai disini berarti kita telah mengaktifkan fitur Google Maps untuk kita akses. Lakukan klik Enable API pada fitur yang lainnya sesuai kebutuhan aplikasi yang akan kita buat.

Langkah 4
Sekarang saatnya kita buat API Key, Pilih menu Credentials di menu kiri lalu klik tombolCreate New Key – Server key

Lalu klik Create. Dan! Selamat api key telah berhasil dibuat.

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