Setelah sekian lama saya menulis mengenai pengertian google map maka kali ini saya akan menuliskan bagaimana cara menampilkan google map pada halaman web pribadi kita, baik pada localhost maupun pada server global. Namun ada syarat tertentu jika ingin ditampilkan pada localhost, yakni harus terkoneksi dengan internet. Lalu bagaimana memualinya? Ok, langsung saja kita bahas bagaimana cara menampilkan google map pada halaman web kita pribadi.
Saya akan menampilkan map kampus Universitas Muhammadiyah Malang, pada halaman web pribadi saya dengan ukuran 600x600 dan perbesaran 16 pada google map. Bagaimana cara menampilkan peta ini? Ok, langsung saja kita buat file HTML, terserah mau diletakkan pada localhost ataupun server global, dan tuliskan kode berikut ini:
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAV0LoZNpqgY-rxlxY5tHlNhTk3sZGQVAGR3OJC3CutBGx_5gyMxTkSi6ThADd2ByPqNZWnId0tJkDPQ" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-7.921512630151737, 112.59718179702759),16);
//ini untuk control zoom
map.addControl(new GLargeMapControl());
//ini untuk kanan atas
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
//memilih jenis peta
map.setMapType(G_SATELLITE_MAP);
}
}
</script>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</body>
Keterangan dari kode di atas adalah sebagai berikut :<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAV0LoZNpqgY-rxlxY5tHlNhTk3sZGQVAGR3OJC3CutBGx_5gyMxTkSi6ThADd2ByPqNZWnId0tJkDPQ" type="text/javascript"></script>
Kode di atas merupakan kode application programming interface (API). Untuk mendapatkan kode tersebut, kunjungi halaman ini. Lalu pilih kode JavaScript dan letakkan pada awal script. Pada tulisan "sensor" pada URL tersebut, pilih atau tulis true.
map.setCenter(new GLatLng(-7.921512630151737, 112.59718179702759),16);
Kode di atas berfungsi untuk menentukan titik tengah pada map yang akan ditampilkan. Terdapat tulisan angka yakni -7.921512630151737 dan 112.59718179702759. Angka -7.921512630151737 merupakan koordinat lintang atau latitude, sedangkan 112.59718179702759 adalah koordinat bujur atau longitude. Sedangkan angka 16 dibelakangnya merupakan perbesaran dari tampilan peta
map.addControl(new GLargeMapControl());
Kode di atas berfungsi untuk menampilkan zoom control, atau kontrol untuk membesar atau mengecilkan peta. Terletak pada sebelah kiri peta. Jika kode tersebut tidak ditulis, maka zoom control tersebut tidak akan nampak.
var mapControl = new GMapTypeControl(); map.addControl(mapControl);
Pada kode di atas berfungsi untuk menampilkan pilihan jenis peta yang dapat dipilih. Letaknya ada pada sebelah kanan atas gambar peta. Dan jika kode tersebut tidak ditulis, maka pilihan peta tersebut tidak akan ditampilkan.
map.setMapType(G_SATELLITE_MAP);
Kode di atas berfungsi untuk menampilkan jenis peta yang pertama kali ditampilkan. adapun kode jenis map tersebut antara lain :
- G_NORMAL_MAP menampilkan jenis peta jalan/digital.
- G_SATELLITE_MAP menampilkan jenis foto satelit.
- G_HYBRID_MAP menampilkan gabungan antara peta jalan dengan foto satelit.
<body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width: 600px; height: 400px"></div></body>
Kode di atas merupakan kode utama yang berfungsi untuk menampilkan peta tersebut. Untuk menentukan besar suatu peta dapat mengubah angka pada width untuk lebar dan height untuk tinggi pada kanvas suatu peta.
Nah, cukup mudah bukan untuk membuat google map pada halaman web milik kita sendiri
Nah, sekarang giliran anda untuk mencobanya. Sebagai contoh, anda dapat melihat halaman di bawah ini.
Nah, cukup mudah bukan untuk membuat google map pada halaman web milik kita sendiri
Nah, sekarang giliran anda untuk mencobanya. Sebagai contoh, anda dapat melihat halaman di bawah ini.
download :
numpang tanya gan,
ReplyDeleteAPI itu bentuknya kyk software ato cuma kodingan aja ato yg laen??
API itu koding aja koq gan, gratis, jadi di coding itu tambahanin code API nya, kelar deh :D
ReplyDeleteMau nanya dong gan ..
ReplyDeleteKalau saya mau menampilkan maps tapi datanya di ambil dari database mysql dengan tipe data geometri gimana yaa ?