MODUL II
TUTORIAL DASAR PEMROGRAMAN GIS DENGAN MENGGUNAKAN GOOGLE MAPS
Modul II
TUTORIAL DASAR PEMROGRAMAN GIS DENGAN MENGGUNAKAN GOOGLE MAPS API
A. Google Maps API
Google Maps adalah layanan gratis Google yang cukup popular. Anda dapat menambahkan fitur Google Maps dalam web Anda sendiri dengan Google Maps API. Google Maps API adalah library JavaScript. Menggunakan atau memprogram Google Maps API sangat mudah. Yang Anda butuhkan adalah pengetahuan tentang HTML dan JavaScript, serta koneksi Internet. Dengan menggunakan Google Maps API Anda dapat menghemat waktu dan biaya Anda untuk membangun aplikasi peta digital yang handal, sehingga Anda dapat focus hanya pada data-data Anda. Biarkan data peta-peta dunia menjadi urusan Google saja.
B. Mendaftar Google Maps API
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).
Berikut ini langkah-langkah untuk mendapatkan API Key
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).
Berikut ini langkah-langkah untuk mendapatkan API Key
1. Buat akun google (gmail).
3. Klik GET A KEY
4. Klik Continue
5. Centang I agree that my use of any services and related APIs is subject to my compliance with the applicable Terms of Service.
6. Klik Agree and Continue
7. Klik Create
8. Klik Ok
Pendaftaran API Key telah selesai, perhatikan gambar di bawah ini, teks yang ter-blok di gambar merupakan API Key yang akan digunakan dalam Project GIS.
C. Latitude dan Longtitude
Angka latitude dan longitude itu berfungsi untuk memudahkan pencarian titik koordinat suatu lokasi atau wilayah. Dengan mencantumkan angka latitude dan longitude orang lain bisa dengan mudah mencari lokasi kantor, rumah sakit dan lain-lain dengan menggunakan Google map atau aplikasi sejenisnya.
Berikut ini langkah-langkah yang dapat digunakan untuk mendapatkan latitude dan longtitude pada Google Maps :
2. Setelah Google Maps terbuka, ketik nama tempat atau daerah di kotak searchnya, untuk lebih jelas perhatikan gambar 2.9.
Gambar 2.9 Peta Bandung
3. Selanjutnya , klik kanan pada bagian peta tersebut pilih “ ada apa di sini ? “, perhatikan gambar 2.10.
Gambar 2.10 Mencari Latitude dan Longtitude
4. Maka latitude dan longtitude akan tampil dalam kotak search.
Gambar 2.10 Hasil Pencarian Latitude dan Longtitude
Latitude : -6.899502
Longtitude : 107.574295
D. Menampilkan Peta Pada Website
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</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>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.914839, lng: 107.603134},
zoom: 10
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAhczAAOwP5YhZ0GLMNHN5zwiqjnE8NjL8&callback=initMap"
async defer></script>
</body>
</html>
|
E. Type Peta
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>45° imagery</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.914839, lng: 107.603134},
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAhczAAOwP5YhZ0GLMNHN5zwiqjnE8NjL8&signed_in=true&callback=initMap"></script>
</body>
</html>
|
Comments
Post a Comment