Google maps merupakan layanan dari Google Apps yang dimana Google menyediakan free API untuk digunakan dalam mendevelop sebuah aplikasi maps. Untuk mendapatkan
API Google ini anda dapat mengakses link dibawah :
https://www.developers.google.com/maps/web/
Pada halaman pertama akan muncul seperti gambar dibawah, pilih saja
GET A KEY untuk mendapatkan
API Key.
 |
| Gambar 1 |
Selanjutnya akan ada kotak dialog cara mendapatkan
API Key, silahkan pilih Continue.
 |
| Gambar 2 |
Pada combo box pilih Create New Project dan klik Continue.
 |
| Gambar 3 |
Pada pojok kanan bawah , akan tampil kotak dialog aktifitas pembuatan Project.
 |
| Gambar 4 |
Buat nama project anda , pada bagian situs saya sarankan untuk
mengkosongkan nya saja, dan pilih Create
 |
| Gambar 5 |
API Key anda telah terbuat dan siap untuk di pergunakan pada developing Google Maps.
 |
| Gambar 6 |
Setelah kita memiliki API Key untuk pembuatan maps, kita buat sebuah file html di dalam folder localhost (htdocs). Lebih baiknya buatlah sebuah folder untuk project pertama ini. Buat file html dan beri nama file Tutorial_maps_1.html , dan ketikan code program dibawah ini untuk membuat maps.
<!DOCTYPE html>
<html>
<head>
<title>Java Sc Developer - MAPS</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.4677041, lng: 101.3565166},
zoom: 16
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MASUKAN_API_KEY_ANDA&callback=initMap">
</script>
<body>
<div id="map"></div>
</body>
</html>
Dalam baris 16 sampai 24 merupakan syntak javascript untuk mendeklarasikan komponen dari Maps yang di akan di tampilkan.
var map;
Merupakan variabel dari map yang akan di deklarasikan.
function initMap()[/code]Adalah baris fungsi yang berisi syntax javascript untuk setingan Maps.[code]map = new google.maps.Map(document.getElementById('map')
Pendeklarasian dari variable map yang berisi class Map yang akan di panggil
document.getElementById('map') berfungsi mengarahkan objek dokumen map ke elemen html dengan id 'map'.
center: {lat: 0.4677041, lng: 101.3565166},
Posisi tengah dari maps yang ditampilkan dengan koordinat seperti diatas. Anda dapat merubah koordinat diatas sesuai dengan posisi yang di inginkan. Cara untuk mendapatkan koordinat tersebut cukup akses.
www.google.co.id/maps/
kemudian klik atau cari posisi yang dituju pada maps, dan pada address bar browser akan menampilkan koordinat dari lokasi yang di pilih. Copy dan Paste koordinat dengan urutan latitude (lat) dan longitude (lng).
 |
| Gambar 7 |
Pada gambar diatas lat : 0.4683235 , lng : 101.3699541 dengan nilai zoom : 15.
zoom: 16
Jarak yang ditampilkan dari citra satelit, semakin besar zoom level nya maka semakin dekat citra gambar dari satelit yang di tampilkan.
Pada baris 25 merupakan link untuk mengambil file javascript dengan API Key yang telah di buat sebelumnya.
Buka file html dengan akses dari localhost maka sebagai contoh akan tampil seperti dibawah ini.
0 Komentar
Keep Learning and Keep Sharing