Hallo sobat mitra tekno niaga, melanjutkan tulisan Kami sebelumnya tentang Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta, kali ini Kami ingin memberikan tutorial tentang bagaimana cara menampilkan marker lokasi Google Maps dengan PHP dan database MySQL. Tanpa panjang lebar lagi, Yuk mari baca dan simak tulisan ini sampai habis. Di jamin akan memberikan manfaat yang besar untuk menambah pengetahuan Anda. Oke, langsung saja ya.
Untuk menampilkan marker lokasi Google Maps dengan PHP dan database MySQL, Anda bisa ikuti langkah-langkah dibawah ini:
1. Buatlah database melalui phpmyadmin Anda masing-masing dengan nama "googlemaps".
2. Buatlah table dengan nama "lokasi", strukturnya ikuti seperti script sql berikut ini:
--
-- Table structure for table `lokasi`
--
CREATE TABLE `lokasi` (
`id` int(11) NOT NULL,
`nama_lokasi` varchar(100) NOT NULL,
`latitude` varchar(50) NOT NULL,
`longitude` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `lokasi`
--
INSERT INTO `lokasi` (`id`, `nama_lokasi`, `latitude`, `longitude`) VALUES
(1, 'Jakarta', '-6.208760', '106.845599'),
(2, 'Makassar', '-5.147696', '119.432593'),
(3, 'Padang', '-0.947110', '100.414603'),
(4, 'Pontianak', '-0.027842', '109.344250'),
(5, 'Manokwari', '-0.861277', '134.062422'),
(6, 'Nabire', '-3.371565', '135.501464'),
(7, 'Yogyakarta', '-7.795766', '110.369866'),
(8, 'Bali', '-8.344295', '115.101547'),
(9, 'Palangkaraya', '-2.216392', '113.921577'),
(10, 'Palembang', '-2.976224', '104.773948');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `lokasi`
--
ALTER TABLE `lokasi`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `lokasi`
--
ALTER TABLE `lokasi`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;3. Pada tutorial ini Kami menggabungkan objek marker dan objek info window. Untuk lebih jelasnya Anda bisa langsung copy paste contoh script di bawah ini ke komputer Anda, lalu perhatikan dan pahami dengan baik remark-remark (keterangan) yang sudah Kami berikan pada setiap baris kode script tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API: Cara Menampilkan Lokasi dengan PHP dan MySQL</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
<script type="text/javascript">
var marker;
function initialize(){
// Variabel untuk menyimpan informasi lokasi
var infoWindow = new google.maps.InfoWindow;
// Variabel berisi properti tipe peta
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Pembuatan peta
var peta = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
// Variabel untuk menyimpan batas kordinat
var bounds = new google.maps.LatLngBounds();
// Pengambilan data dari database MySQL
<?php
// Sesuaikan dengan konfigurasi koneksi Anda
$host = "localhost";
$username = "root";
$password = "";
$Dbname = "googlemaps";
$db = new mysqli($host,$username,$password,$Dbname);
$query = $db->query("SELECT * FROM lokasi ORDER BY nama_lokasi ASC");
while ($row = $query->fetch_assoc()) {
$nama = $row["nama_lokasi"];
$lat = $row["latitude"];
$long = $row["longitude"];
echo "addMarker($lat, $long, '$nama');n";
}
?>
// Proses membuat marker
function addMarker(lat, lng, info){
var lokasi = new google.maps.LatLng(lat, lng);
bounds.extend(lokasi);
var marker = new google.maps.Marker({
map: peta,
position: lokasi
});
peta.fitBounds(bounds);
bindInfoWindow(marker, peta, infoWindow, info);
}
// Menampilkan informasi pada masing-masing marker yang diklik
function bindInfoWindow(marker, peta, infoWindow, html){
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(peta, marker);
});
}
}
</script>
</head>
<body>
<div id="googleMap" style="width:1100px;height:500px;"></div>
</body>
</html>Bila Anda perhatikan dengan cermat, cara kerja script di atas yaitu script PHP membangun koneksi ke database MySQL untuk menampilkan data berupa nama lokasi dan titik koordinat latitude longitude, kemudian script PHP memasukan data-data tersebut ke dalam script JavaScript untuk ditampilkan ke peta Google Maps. Bila contoh script tersebut dijalankan, maka akan menghasilkan output seperti gambar dibawah ini:
Selesai. Sangat mudah kan?
Demikian pembahasan tentang Google Maps API: Cara Menampilkan Marker Lokasi dengan PHP dan MySQL, semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih
