Baca Juga :  Cara Mengirim Email ke Semua Pengguna Terdaftar di WordPress

Cara Menggambar Jalur di Peta menggunakan API Arah Google Maps

2 353

Dalam tutorial ini, kita akan melihat cara menggambar jalan di peta antara dua lokasi menggunakan Google Maps Javascript API. API ini menyediakan layanan Direction untuk menarik rute antar lokasi. Layanan arah ini membutuhkan awal dan titik akhir dari rute yang akan ditarik. Ini merespons sumber arah yang akan diberikan pada lapisan peta.

Dalam contoh ini, saya memiliki sekelompok kotak centang yang menunjukkan pilihan lokasi. Saat mengirimkan lokasi kotak centang yang dipilih, saya membentuk sebuah array waypoint untuk meminta jalur rute. Saya mengirim array waypoint ke layanan Google Maps Direction dengan titik awal dan akhir dari rute. Ini merespons sumber arahan dengan statusnya. Status respon akan diperiksa dan petunjuknya akan ditetapkan pada peta berdasarkan status.

Kode HTML untuk Menunjukkan Waypoints

Kode HTML berikut berisi opsi masukan kotak centang untuk menunjukkan titik arah. Ini berisi tombol Draw Path untuk memicu permintaan layanan Direction dengan titik arah yang dipilih.

<div class="lbl-way-points">Way Points</div>
    
<div>
<?php
foreach ($countryResult as $k => $v) {
    ?>
  <div class="way-points-option"><input type="checkbox" name="way_points[]" class="way_points" value="<?php echo $countryResult[$k]["country"]; ?>"> <?php echo $countryResult[$k]["country"]; ?></div>
<?php
}
    ?>
<input type="button" id="go" value="Draw Path" class="btn-submit" />
</div>

<div id="map-layer"></div>

Kode untuk InitMap dan Permintaan Layanan Arah

Kode untuk menginisialisasi peta sama seperti yang telah kita lihat di tutorial sebelumnya, seperti mendapatkan lokasi saat ini, menambahkan spidol peta dan banyak lagi. Dalam kode ini, saya membentuk array waypoint dengan menggunakan nilai kotak centang yang dipilih. Kemudian, saya menetapkan pilihan yang diperlukan untuk permintaan layanan arahan, seperti lokasi mulai dan akhir dan titik arah. Layanan arah akan merespon permintaan dengan sumber arahan dan statusnya.

Baca Juga :  Advanced Search Menggunakan PHP

Status respon ini diperiksa dengan menggunakan fungsi callback. Sumber arahan diberikan pada layer peta target berdasarkan status respon. Jika statusnya tidak OK, maka saya telah menunjukkan kotak peringatan Javascript untuk mengetahui pengguna tentang masalah yang terjadi saat meminta arahan.

<script>
  	var map;
	var waypoints
  	function initMap() {
    	  	var mapLayer = document.getElementById("map-layer"); 
        	var centerCoordinates = new google.maps.LatLng(37.6, -95.665);
    		var defaultOptions = { center: centerCoordinates, zoom: 4 }
    		map = new google.maps.Map(mapLayer, defaultOptions);

        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        directionsDisplay.setMap(map);

        $("#go").on("click",function() {
        	    waypoints = Array();
            	$('.way_points:checked').each(function() {
                waypoints.push({
                    location: $(this).val(),
                    stopover: true
                });
            	});
            var locationCount = waypoints.length;
            if(locationCount > ) {
                var start = waypoints[].location;
                var end = waypoints[locationCount-1].location;
                drawPath(directionsService, directionsDisplay,start,end);
            }
        });
        
  	}
    	function drawPath(directionsService, directionsDisplay,start,end) {
        directionsService.route({
          origin: start,
          destination: end,
          waypoints: waypoints,
          optimizeWaypoints: true,
          travelMode: 'DRIVING'
        }, function(response, status) {
            if (status === 'OK') {
            directionsDisplay.setDirections(response);
            } else {
            window.alert('Problem in showing direction due to ' + status);
            }
        });
  }
</script>

Permintaan Layanan Arah Google Maps – Output

Tangkapan layar berikut menunjukkan jalur di antara titik arah yang dipilih seperti yang dihuni dengan kotak centang.

Kamu juga bisa Membuat Rute Dengan Menggunakan API Javascript Google Maps untuk dipelajari.

Get real time updates directly on you device, subscribe now.

2 Comments
  1. […] API Javascript Google Maps. Dalam tutorial sebelumnya, kita telah melihat contoh kode untuk menambahkan marker di layer peta. Dalam contoh ini, saya menambahkan spidol untuk menunjuk lokasi dan menghubungkan titik-titiknya […]

  2. deni oktaviano says

    makasih admin artikelnya sangat membantu

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.