Google Maps merupakan peta online gratis yang disediakan oleh Google Inc, sang raksasa mesin pencari internet. Walaupun sebenarnya ada versi berbayarnya, Google Maps (atau kita sebut saja ‘GMaps’) versi gratis sudah lebih dari cukup untuk sekedar menampilkan peta online yang interaktif di web. Caranya pun cukup mudah, dengan menggunakan API (Application Programming Interface) yang sudah disediakan Google. Versi API yang terbaru adalah versi 3, yang merupakan perbaruan dari versi-versi sebelumya. Ada juga beberapa format script baru yang tidak kompatibel dengan versi sebelumnya. Jadi saya sarankan kalau baru mau belajar sebaiknya langsung ke versi 3 saja.
GMaps API v.3 ini berbasis javascript, yakni script yang bertipe client scripting language (script yang dieksekusi di sisi web browser client). Jadi penggunaan script ini tidak akan membebani server dan banyak tergantung dari resource komputer client. Selain itu javascript juga kompatibel dengan semua tipe web browser (Google Chrome, Mozilla Firefox, Opera, Safari, dll) baik untuk tampilan desktop maupun mobile (HTML5 friendly). Mungkin karena berbagai keunggulan inilah Google merilis API dalam bentuk javascript.
Menampilkan Peta Sederhana Google Maps
Baiklah, langkah pertama kita belajar GMaps javascript adalah menampilkannya di web browser. Tetapi sebelumnya, untuk API versi 3 ini Anda disyaratkan untuk mendaftarkan aplikasi Anda untuk mendapatkan API Key GMaps. Sekali lagi proses ini gratis (untuk ‘Standard Plan’) dan tidak memakan waktu lama. Untuk mendapatkan API Key caranya cukup mudah, silahkan diikuti caranya di sini. Jika sudah mendapatkan API Key Anda dapat melanjutkan ke tutorial selanjutnya, karena jika Anda tidak mempunyai API key ini, peta GMaps tidak akan tertampil di web browser.
Langkah berikutnya, karena aplikasi yang kita buat berupa web, maka Anda akan membutuhkan web server. Anda dapat menggunakan web server online melalui web hosting (ada yang berbayar ada yang gratis) atau dapat menginstal web server offline/lokal di laptop Anda sendiri. Salah satu web server lokal yang dapat Anda gunakan adalah APACHE. Untuk mudahnya, Anda dapat menginstal XAMPP, yakni semacam paket bundle yang mencakup semua kebutuhan web server lokal, yakni APACHE, Database MySQL, FTP, dll. Jika laptop Anda menggunakan OS Windows pastikan Anda mengunduh installer yang bertipe Windows. Untuk instalasinya cukup mudah, tinggal next-next aja seperti tipikal instalasi aplikasi Windows pada umumnya. Tidak perlu saya jelaskan detail ya, saya yakin Anda dapat melakukannya dengan mudah.
Jika sudah terinstal, pastikan web server APACHE dalam kondisi running. Berikutnya buat script berikut ini (bisa menggunakan text editor biasa seperti Notepad atau Notepad+++) dan simpan dengan nama GMap.html dan simpan di folder c:/xampp/htdocs/tutorial/gmap.html. Berikut script-nya
<!DOCTYPE html>
<html>
<head>
<title>Peta Gmaps Sederhana</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=API_key_Anda"
type="text/javascript"></script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.917464, lng: 107.619123},
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Penjelasan script di atas:
Baris 1-6 : deklarasi html tag untuk file html agar dimengerti web browser
Baris 7-16 : pengaturan CSS/style untuk tampilan web
Bari5 17-18 : deklarasi javascript API yang digunakan
Baris 19-28 : kode javascript untuk menampilkan peta google maps dengan koordinat kota Bandung
Baris 29-33: tag html. Pada baris 31 didefinisikan div id ‘map’ yang nantinya diisi peta GMaps sesuai yang didefinisikan di baris 22
Jika sudah menyimpan script di atas, buka web browser favorit Anda, dan ketik alamat file html Anda tadi di address bar dengan format : http://localhost/tutorial/gmap.html. Sesaat berikutnya, seharusnya akan muncul peta Gmap di browser Anda sebagai berikut. Jika belum muncul, coba cek lagi API key Anda.
Web
Demikian tutorial sederhana tentang bagaimana cara menampilkan Google Maps ke web dengan javascript. Nanti akan saya lanjut lagi untuk tutorial lain yang lebih advance
a Technopreneur – writer – Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com
cari koordinatnya gmn?
cari api keynya gmn?
cari koordinat bisa ke whatsmygpsdotcom atau googling aja
api key bisa didapat setelah daftar ke google https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ID
aslkm gan, sekarang (20-1-2019) ga bisa tampil maps nya gan ada solusi kah?
sudah saya praktekkan coding diatas dan sy sdh dpt key API nya tp tetap ga bisa
masih bisa mas, saya juga masih sering pake script di atas (sesuai kebutuhan)
Mas bisa gak marker dan search jadi satu tampilan?
bisa aja mas