Cara Menambahkan Marker untuk Menunjukkan Lokasi di Google Maps

Hallo sahabat Dumenity berjumpa lagi dalam tutorialÂ kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Cara Menambahkan Penanda untuk Menunjukkan Lokasi di Google Maps. API Javascript Google Map menyediakan data geografis berdasarkan permintaan yang dikirim melalui skrip sisi klien. Dalam tutorial ini, kita akan melihat bagaimana menambahkan penanda untuk menunjukkan berbagai lokasi di Google Maps.

Dalam contoh ini, saya telah membaca lokasi dari database negara yang berisi jumlah nama negara. Saya mengulangi hasil negara dan mendapatkan koordinat lintang dan bujur menggunakan Layanan Google Map GeoCoding. Dengan menggunakan koordinat lokasi, saya telah menambahkan marker untuk menemukan negara-negara di Peta. Pada mouse di atas penanda peta, saya telah menunjukkan tooltip dengan nama negara dengan mengatur parameter judul.

Membaca Nama Negara Dari Database

Kode PHP ini menghubungkan database menggunakan kelas DBController dan membaca nama negara ke dalam sebuah array. Kumpulan hasil ini digunakan untuk mendapatkan koordinat lokasi yang bisa digunakan untuk menambahkan penanda peta.

<?php

require("DBController.php");

$dbController = new DBController();

$query = "SELECT * FROM tbl_country";
$countryResult = $dbController->runQuery($query);

?>

<?php

require("DBController.php");

$dbController = new DBController();

$query = "SELECT * FROM tbl_country";

$countryResult = $dbController->runQuery($query);

File DBController.php

<?php
Namespace PHP\Examples;

class DBController {
	private $host = "localhost:3307";
	private $user = "dumetschool";
	private $password = "dumetschool";
	private $database = "webmaster";
	private $conn;
	
	function __construct() {
		$this->conn = $this->connectDB();
	}
	
	function connectDB() {
		$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
		return $conn;
	}
	
	function runQuery($query) {
		$result = mysqli_query($this->conn,$query);
		while($row=mysqli_fetch_array($result)) {
			$resultset[] = $row;
		}
		if(!empty($resultset))
			return $resultset;
	}
}
?>

<?php

Namespace PHP\Examples;

class DBController {

private $host = "localhost:3307";

private $user = "dumetschool";

private $password = "dumetschool";

private $database = "webmaster";

private $conn;

function __construct() {

$this->conn = $this->connectDB();

}

function connectDB() {

$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);

return $conn;

}

function runQuery($query) {

$result = mysqli_query($this->conn,$query);

while($row=mysqli_fetch_array($result)) {

$resultset[] = $row;

}

if(!empty($resultset))

return $resultset;

}

Javascript untuk Menambah Penanda Lokasi di Google Map

Kode Javascript berikut digunakan untuk mendapatkan koordinat lokasi untuk nama negara yang diambil dari database. Saya mengulangi hasil basis data dan mendapatkan koordinat lintang dan bujur negara pada setiap iterasi pengulangan menggunakan layanan Google Map GeoCoding. Kemudian, data lokasi ini akan digunakan untuk memplot lokasi negara di peta dengan marker. Peristiwa mouseover pada penanda akan menunjukkan nama negara dengan tooltip.

<script
		src="https://maps.googleapis.com/maps/api/js?key=<?php echo API_KEY; ?>&callback=initMap"
		async defer></script>

	<script type="text/javascript">
	var map;
	var geocoder;		

	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);
		geocoder = new google.maps.Geocoder();
		
		<?php
		if (! empty($countryResult)) {
		    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[0].geometry.location.lat();
							var longitude = LocationResult[0].geometry.location.lng();
						} 
		        	    		new google.maps.Marker({
		            	        position: new google.maps.LatLng(latitude, longitude),
		            	        map: map,
		            	        title: '<?php echo $countryResult[$k]["country"]; ?>'
		            	    });
					});
			    <?php
		    }
		}
		?>		
	}
	</script>

<script

src="https://maps.googleapis.com/maps/api/js?key=<?php echo API_KEY; ?>&callback=initMap"

async defer></script>

var map;

var geocoder;

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);

geocoder = new google.maps.Geocoder();

<?php

if (! empty($countryResult)) {

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[0].geometry.location.lat();

var longitude = LocationResult[0].geometry.location.lng();

}

new google.maps.Marker({

position: new google.maps.LatLng(latitude, longitude),

map: map,

title: '<?php echo $countryResult[$k]["country"]; ?>'

});

<?php

}

</script>

hasil dari Cara Menambahkan Penanda untuk Menunjukkan Lokasi di Google Maps lihat di bawah ini;

Oke itulah tadi pembahasan saya tentang Cara Menambahkan Penanda untuk Menunjukkan Lokasi di Google Maps, semoga bermanfaat.

Cara Menambahkan Marker untuk Menunjukkan Lokasi di Google Maps

Facebook DUMET School

Konsultasi Gratis

Categories