Pada artikel ini kita akan membuat sebuah halaman google maps untuk mengukur jarak antara satu lokasi dengan lokasi lainnya menggunakan library javascript milik zhenyanghua bernama MeasureTool.
Persiapan
Download Library MeasureTool terlebih dahulu, download hanya file MeasureTool.min.js.
Buat file MeasureTool.html
Buat file MeasureTool.html
Ketik kode di MeasureTool.html seperti berikut :
<html>
<head>
<title>YudhaTP - Blog</title>
<style>
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script src="MeasureTool.min.js"></script>
<script>
var map, measureTool;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.385589, lng: 106.830711},
zoom: 14,
scaleControl: true
});
measureTool = new MeasureTool(map, {
unit: MeasureTool.UnitTypeId.IMPERIAL
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_ANDA&libraries=geometry&callback=initMap" async defer></script>
catatan : pastikan kedua file berada dalam 1 folder yang sama
Hasilnya
Jadi jarak dari SPBU ke SPBU lain berjarak 1.110 feet (kaki) atau setara 338 meter :) .
Cara mengukurnya sebagai berikut, klik kanan pada lokasi peta tujuan, klik Measure Distance
Kemudian klik pada lokasi tujuan, maka jarak akan terhitung otomatis dalam satuan feet.
Jika ingin mengukur lagi, klik kanan pada map, pilih Clear Measurement
Mengapa hasil pertama dan kedua berbeda yaitu 1.110 dan 971? karena titik koordinat yang dipilih tidak sama, pada hasil 1.110 terlihat saya memilih lokasi tujuan lebih keatas atau lebih jauh lagi dari yang hasil 971.
Penjelasan Kode
<script src="MeasureTool.min.js"></script>
Jadi jarak dari SPBU ke SPBU lain berjarak 1.110 feet (kaki) atau setara 338 meter :) .
Cara mengukurnya sebagai berikut, klik kanan pada lokasi peta tujuan, klik Measure Distance
Kemudian klik pada lokasi tujuan, maka jarak akan terhitung otomatis dalam satuan feet.
Jika ingin mengukur lagi, klik kanan pada map, pilih Clear Measurement
Mengapa hasil pertama dan kedua berbeda yaitu 1.110 dan 971? karena titik koordinat yang dipilih tidak sama, pada hasil 1.110 terlihat saya memilih lokasi tujuan lebih keatas atau lebih jauh lagi dari yang hasil 971.
Penjelasan Kode
<script src="MeasureTool.min.js"></script>
include file library javascript MeasureTool
<div id="map"></div>
instance map dari google maps akan berada di div ini dengan div id bernilai map.
var map, measureTool;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -6.385589, lng: 106.830711},
zoom: 14,
scaleControl: true
});
measureTool = new MeasureTool(map, {
unit: MeasureTool.UnitTypeId.IMPERIAL
});
}
Kita mendeklarasikan 2 variabel yang nanti akan digunakan yaitu map dan measuretool. Variabel map berisi nilai dari new google maps instance dengan koordinat awal berada di kota depok dan zoom scale 14. Sementara variabel measureTool berisi nilai dari new measuretool yang di inisiasi ke dalam map dalam bentuk widget dengan jenis unit imperial (bisa dibaca direferensi) yang dipanggil pada fungsi initMap.
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_ANDA&libraries=geometry&callback=initMap" async defer></script>
Menggunakan google maps javascript API dengan mereferensi libarry geometry, pada string API_KEY_ANDA diisi dengan API key yang anda punya. Ketika diload maka fungsi callback akan memanggil fungsi initMap.
Semoga Bermanfaat
Artikel ini dibuat oleh Yudha Tri Putra sebagai penulis artikel, diperbolehkan menyalin artikel ini secara utuh tanpa mengubah atau menambah isi artikel.
.jpg)
0 komentar:
Posting Komentar