Membuat Rute Dengan Menggunakan API Javascript Google Maps

Dalam tutorial ini, kita akan melihat cara menggambar jalur antara beberapa lokasi di peta menggunakan 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 dengan menggambar jalur di antara lokasi. Jalan ini akan menunjukkan rencana penerbangan untuk menutupi lokasi yang diplot pada peta.

Dalam kode ini, saya telah menggunakan kelas Polyline dari Google Maps API. Kelas ini digunakan untuk menggambar jalur pada lapisan peta di antara koordinat jalur. Saya mendapatkan daftar negara dari database dan menghitung koordinat lokasi masing-masing negara menggunakan layanan Google Map GeoCoding. Lokasi ini didorong ke dalam array yang akan dilalui sebagai parameter koordinat jalur kelas Polyline untuk menggambar jalan.

Mengakses Google Map API melalui Javascript ke Draw Path

Javascript berikut digunakan untuk mendapatkan garis lintang dan koordinat bujur negara-negara yang dibaca dari database. Kode ini sama seperti yang kita lihat sambil menambahkan spidol di peta pada tutorial sebelumnya. Koordinat ini didorong ke dalam array lokasi pada setiap iterasi.

Saya telah menetapkan fungsi untuk memanggil kelas Polyline Google untuk menarik jalur antara koordinat lokasi negara. Saya memanggil fungsi ini, setelah semua hasil di negara iterasi dan koordinatnya disimpan dalam array. Fungsi ini menggunakan susunan koordinat jalur untuk menggambar jalan.

<script>
	var map;
	var pathCoordinates = Array();
	function initMap() {
		var countryLength
		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);
		geocoder = new google.maps.Geocoder();
		<?php
            if (! empty($countryResult)) {
            ?>
		countryLength = <?php echo count($countryResult); ?>
		<?php
                foreach ($countryResult as $k => $v) 
                {
            ?>
		geocoder.geocode({
			'address' : '<?php echo $countryResult[$k]["country"]; ?>'
		}, function(LocationResult, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				var latitude = LocationResult[].geometry.location.lat();
				var longitude = LocationResult[].geometry.location.lng();
				pathCoordinates.push({
					lat : latitude,
					lng : longitude
				});

				new google.maps.Marker({
					position : new google.maps.LatLng(latitude, longitude),
					map : map,
					title : '<?php echo $countryResult[$k]["country"]; ?>'
				});

				if (countryLength == pathCoordinates.length) {
					drawPath();
				}

			}
		});
		<?php
                }
            }
            ?>
	}
	function drawPath() {
		new google.maps.Polyline({
			path : pathCoordinates,
			geodesic : true,
			strokeColor : '#FF0000',
			strokeOpacity : 1,
			strokeWeight : 4,
			map : map
		});
	}
</script>
<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=<?php echo API_KEY; ?>&callback=initMap">
	
</script>

Tampilkan Path di Google Map menggunakan Javascript API – Output