Postingan ini bertujuan untuk membantu teman-teman yang ingin menggunakan Google Maps API V3 dalam membangun sebuah aplikasi. Saya berasumsi bahwa teman-teman telah bisa menggunakan editor seperti notepad dan sebagainya serta memahami aturan dalam penulisan HTML, Javascript dan CSS. Postingan ini akan menjelaskan mengenai source code yang dirujuk pada halaman resmi Google Maps. Pada postingan kali ini saya akan membahas bagaimana menampilkan sebuah peta sederhana menggunakan Google Maps API sebagai tahapan awal untuk mengenal Google Maps API V3 lebih jauh.
Peta sederhana ini nantinya akan menampilkan peta dengan titik tengah peta berada pada posisi yang kita inginkan. Peta juga memiliki kontrol dasar berupa Zoom Level yang merupakan bawaan dari Google Maps. Peta ini belum memiliki marker/penanda atau jalur yang ditampilkan. Berikut tampilan peta sederhana yang dimaksud.
 |
| Simple Maps |
Script yang digunakan untuk menampilkan peta sederhana yaitu:
<!DOCTYPE html>
<html><head><title>Simple Map</title><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8"><style>html, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</style><script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><script>var map;function initialize() {var mapOptions = {zoom: 8,center: new google.maps.LatLng(-0.9553562, 100.8766657)};map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);}</script></head><body onload='initialize()'><div id="map-canvas"></div></body></html>
Script diatas telah mengalami perubahan sesuai kebutuhan. Berikut akan dijelaskan beberapa bagian penting dari script tersebut. Diasumsikan teman-teman sekalian telah memahami dasar-dasar penulisan HTML,Javascript, CSS dan sebagainya.
1. Style div sebagai tempat menampilkan peta.
<style>
html, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</style>
Script diatas digunakan untuk mengatur layout div yang akan digunakan sebagai tempat menampilkan peta. tanda # pada #map-canvas merujuk pada "id" pada sebuah elemen. Baca mengenai "id dan class" pada pembahasan CSS. W3schools (Disini) merupakan situs tempat penulis belajar mengenai CSS.
2. Menghubungkan dengan Google Maps API.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
Script diatas berguna agar seluruh API yang dimiliki oleh Google Maps dapat digunakan pada aplikasi yang sedang dibangun.
3. Javascript yang digunakan untuk menampilkan dan mengatur peta
<script>
var map;function initialize() {var mapOptions = {zoom: 8,center: new google.maps.LatLng(-0.9553562, 100.8766657)};map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);}</script>
Fungsi javascript "Initialize()" berguna untuk mengatur peta yang akan ditampilkan. mapOptions memiliki 2 parameter yaitu Zoom dan Center. Zoom digunakan untuk mengatur perbesaran peta dan Center digunakan untuk memberikan nilai kordinat sebagai posisi tengah dari peta.
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
Script diatas berguna untuk menggambarkan peta pada elemen dengan id = 'map-canvas' dengan pengaturan peta pada yang diatur pada mapOptions.
4. Tempat peta digambarkan dan cara memanggil fungsi javascript
<body onload='initialize()'>
<div id="map-canvas"></div></body>
onload='initialize()' digunakan untuk memanggil fungsi javascript yang telah dibuat untuk menampilkan peta dengan pengaturan peta yang telah ditentukan. Masih banyak metode lain yang dapat digunakan ketika memanggil sebuah fungsi. <div id="map-canvas"></div> merupakan tempat untuk menggambarkan peta.
Setelah script ditulis dan diatur sesuai dengan kebutuhan maka simpan script dalam server sehingga dapat digunakan pada aplikasi. Peta sederhana ini masih dapat ditingkatkan kegunaannya dengan menambahkan beberapa fitur yang lebih berguna seperti marker/penanda, jalur, integrasi data pada database dan sebagainya.
Cukup sekian postingan kali ini, semoga bermanfaat. Salam olahraga. :D
waw.. nice info :)
BalasHapus