BlogNetizen

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 .

Continue reading →

Cara termudah untuk mulai belajar tentang Google Maps API adalah untuk melihat contoh sederhana. Kali ini di BlogNetizen, saya akan memberikan contoh paling dasar dalam pemprograman Google Map API versi 3 yakni menampilkan peta sederhana. Pada Google Map API 3 akan banyak terlihat sama dengan versi sebelumnya (versi 2). Namun, ada beberapa perbedaan, jadi silakan membaca dokumen ini :D

<!DOCTYPE html>
<html>
<head>
<meta name="petajogja"
content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/
js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-7.808671167743087, 110.36560535430908);
var myOptions = {
zoom: 8, center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"),
myOptions);}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"
style="width:100%; height:100%"></div>
</body>
</html>

dari contoh script sederhana diatas,
    1. aplikasi menggunakan HTML5 dengan deklarasi <!DOCTYPE html> .
    2. Maps JavaScript API menggunakan tag script.
    3. elemen div bernama "map_canvas" untuk petanya.
    5. fungsi JavaScript ditulis untuk membuat "peta"objek.

function initialize() {var latlng = new google.maps.LatLng
(-7.808671167743087, 110.36560535430908); var myOptions =
{zoom: 8,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById
("map_canvas"),myOptions);
}

Keterangan dari script diatas bahwa peta pertama saat ditampilkan, maka titik tengah peta berada di koordinat peta Yogyakarta (-7.808671167743087, 110.36560535430908)
, dengan Zoom tingkat 8 (semakin besar nilainya semakin dekat petanya), peta ditampilkan dalam type RoadMap. Dan Pada contoh di atas, kita mendefinisikan

bernama "map_canvas"

Type peta lainny
    * ROADMAP menampilkan peta 2D dari Google Maps.
    * SATELLITE menampilkan peta Citra Satelit dari Google Maps.
    * HYBRID menampilkan peta Citra Satelit bserta nama jalan dan kotanya dari Google Maps.
    * TERRAIN menampilkan bentuk permukaan bumi .

id="map_canvas" style="width:100%; height:100%">

Peta yang telah didefiniskan dalam div id="map_canvas" ditampilkan dalam ukuran panjang dan lebar 100% / satu layar penuh. Ukuran dapat kita sesuaikan dengan kebutuhan.. :D

Hasilnya dapat kamu lihat disini >> Peta Jogja

Ok begitu saja, tunggu tutorial berikutnya masih di www.blognetizen.blogspot.com :D

Artikel terkait :
Tutorial Google Map API : Membuat Peta lokasimu sendiri

Continue reading →

Pages

Tutorial Google Map API : Membuat Peta lokasimu sendiri

Dasar Pemprograman Google Map API V3 (Part 1) : The "Hello, World" of Google Maps v3

komentar

Blog Archive

Labels