aldiunanto.com

Menambahkan Google Map pada Website

Hello sobat programming! Kali ini saya akan sharing tutorial menambahkan Google Map pada website yang sedang kita buat. Oke langsung saja kita meluncur ke script! Dalam contoh ini saya akan membuat halaman baru. Pertama-tama buatlah file HTML sederhana dengan struktur sebagai berikut :

 

Dalam script diatas kita bisa lihat tag <div id="my-map"></div>  yang nantinya akan menjadi frame atau kerangka untuk Map yang akan kita import nanti. Langkah selanjutnya, import-lah library dari Google Map itu sendiri. Tambahkanlah tag (sesudah tag “</title>“) :

Oke, kita sudah meng-import Google Map library dari Google Apis. Tinggal satu langkah lagi! Dalam tag <head> setelah </title> ketiklah atau cukup copy-paste script JS(Javascript) dibawah ini. Script ini bertujuan untuk memanggil fungsi dari file library yang sudah kita panggil tadi.

#Sedikit penjelasan : Ada beberapa kode yang cukup penting dalam script diatas untuk dipahami.

  1. zoom: 11” : Kode ini berfungsi sebagai level zooming bagi Map anda. Semakin tinggi nilai zoom, maka Map yang ditampilkanpun akan terlihat lebih dekat.
  2. google.maps.LatLng(-6.453720, 106.956310)” : Angka tersebut sangatlah penting untuk menentukan titik tengah dari Map saat pertama kali load. (Dalam contoh ini koordinat yang dipakai adalah “Klapanunggal, Indonesia”)
  3. MapTypeId.ROADMAP” : Sobat bisa berkreasi dengan mengubah kode diatas. Ini berfungsi akan seperti apakah tipe Map yang akan dibuat. Value lain yang bisa sobat gunakan adalah :
    • MapTypeId.ROADMAP : Menampilkan jalan(default view)
    • MapTypeId.SATELLITE : Menampilkan gambar dari satelit Goggle Earth.
    • MapTypeId.HYBRID : Menampilkan gambar campuran dari pandangan normal & Satelit
    • MapTypeId.TERRAIN : Menampilkan peta fisik berdasarkan Terrain.
  4. " document.getElementById('my-map') ”  : Kode ini adalah untuk penentu selektor mana yang akan Google Map pakai. Tentu saja dalam contoh ini adalah <div id="my-map"></div>

Oiya hampir lupa, percantiklah “the_tag” sobat dengan CSS ! silahkan berkreasi 😀 ini hanya contoh :

 

Oke, kurang lebih full scriptnya adalah seperti ini :

 

Selesai! sekarang coba running file yang sudah dibuat tadi … Bisa? Selamat! Oke kurang lebih hasilnya seperti screenshot dibawah ini :

result

Leave a Reply

%d bloggers like this: