Intip Cara Menampilkan Marker Google Maps API Menggunakan PHP dan MySQL
20 September 2021
Perlu diketahui bersama bahwa Google Maps Platform dapat dijalankan di banyak bahasa pemrograman. Basis pemrograman dalam pengembangan aplikasi Google Maps Platform ini untuk website adalah Javascript. Namun, dalam artikel ini akan membahas bagaimana mengkombinasikan PHP dan Javascript untuk penulisan kode serta MySQL sebagai penyimpanan datanya. Simak dalam intip cara menampilkan marker Google Maps Platform API menggunakan PHP dan MySQL.
Berikut ini hal-hal yang perlu Anda persiapkan untuk memulainya:
- Local Server, dalam artikel ini pengembangan di laptop/ komputer Anda masing-masing menggunakan software XAMPP yang telah menjalankan module Apache dan MySQL.
- Text Editor, dalam hal ini menggunakan Visual Studio Code sebagai text editor
- API Key Google Maps Platform yang sudah dijalankan service Dynamic Maps atau Maps Javascript API
Bagi Anda yang merupakan website developer, bukan hal yang baru lagi dalam menggunakan XAMPP dan Visual Studio Code pun dengan PHP dan MySQL. Dalam hal ini, kita akan menampilkan titik-titik persebaran beberapa kota dan kabupaten. Langsung saja kita sama-sama belajar cara menampilkan marker Google Maps API menggunakan PHP dan MySQL, berikut ini:
- Jalankan terlebih dahulu XAMPP untuk module Apache dan MySQL.
- Buka phpmyadmin untuk membuat database dengan nama “db_rnd”.
- Setelah membuat database “db_rnd”, buatlah table dengan nama “latlng_kota_kab”, silahkan ikuti script SQL berikut agar lebih cepat.
--
-- Table structure for table `latlng_kota_kab`
--
CREATE TABLE latlng_kota_kab(
`id` int(11) NOT NULL,
`kota_kab` varchar(100) NOT NULL,
`latitude` varchar(50) NOT NULL,
`longitude` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data for table `latlng_kota_kab`
--
INSERT INTO `latlng_kota_kab` (`id`, `kota_kab`, `latitude`, `longitude`) VALUES
(1, 'Jakarta Pusat', '-6.2060905', '106.8475342'),
(2, 'Jakarta Utara', '-6.1554034', '106.8926811'),
(3, 'Jakarta Selatan', '-6.2614652', '106.810627'),
(4, 'Jakarta Barat', '-6.1674356', '106.7637634'),
(5, 'Jakarta Timur', '-6.2248623', '106.9004059'),
(6, 'Kota Depok', '-6.4024778', '106.7942333'),
(7, 'Kota Bogor', '-6.5971469', '106.8060388'),
(8, 'Kab. Bogor', '-6.5517758', '106.6291304'),
(9, 'Kota Sukabumi', '-6.9277901', '106.9299316'),
(10, 'Kab. Sukabumi', '-7.2134052', '106.6291304'),
(11, 'Kab. Cianjur', '-7.3579773', '107.1957203'),
(12, 'Kab. Bekasi', '-6.3668231', '107.1736908'),
(13, 'Kota Bekasi', '-6.2381727', '106.9755936');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `latlng_kota_kab`
--
ALTER TABLE `latlng_kota_kab`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `latlng_kota_kab`
--
ALTER TABLE `latlng_kota_kab`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=114. Buka teks editor Anda dan kemudian mulai ketikkan kode HTML yang dimulai dari deklarasi HTML terlebih dahulu
<!DOCTYPE html>5. Kemudian, lanjut dengan tag buka HTML, head, title,style dan body seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Intip Cara Menampilkan Marker Google Maps API Menggunakan PHP dan MySQL | Terralogiq</title>
<style>
#map {
height: 100%;
}
/* Opsional: Untuk menampilkan map dengan full */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>6. Setelah menambahkan kode tersebut, selanjutnya langsung mendeklarasikan #map atau id=map dalam div di antara tag body.
<!DOCTYPE html>
<html>
<head>
<title>Intip Cara Menampilkan Marker Google Maps API Menggunakan PHP dan MySQL | Terralogiq</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>7. Agar dapat menampilkan Dynamic Maps Google Maps API, Anda perlu melakukan deklarasi dengan memasukkan tag script di bawah tag div. Perlu diketahui juga bahwa dalam artikel ini akan menggabungkan objek marker dan objek infoWindow. Anda dapat melakukan copy paste script yang sudah disediakan seperti dibawah ini agar prosesnya lebih cepat.
<!DOCTYPE html>
<html>
<head>
<title>Intip Cara Menampilkan Marker Google Maps API Menggunakan PHP dan MySQL | Terralogiq</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=GMPStart" async defer></script>
<script type="text/javascript">
let map;
let infoWindow;
let mapOptions;
let bounds;
function GMPStart(){
// infoWindow ini digunakan untuk menampilkan pop-up diatas marker terkait lokasi markernya
infoWindow = new google.maps.InfoWindow;
// Variabel berisi properti tipe peta yang bisa diubah-ubah
mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Deklarasi untuk melakukan load map Google Maps API
map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Variabel untuk menyimpan batas kordinat
bounds = new google.maps.LatLngBounds();
// Pengambilan data dari database MySQL
<?php
// Sesuaikan dengan database yang sudah Anda buat diawal
$host = "localhost";
$username = "root";
$password = "";
$Dbname = "db_rnd";
$db = new mysqli($host,$username,$password,$Dbname);
$query = $db->query("SELECT * FROM latlng_kota_kab ORDER BY kota_kab ASC");
while ($row = $query->fetch_assoc()) {
$nama = $row["kota_kab"];
$lat = $row["latitude"];
$long = $row["longitude"];
echo "addMarker($lat, $long, '$nama');\n";
}
?>
// Proses membuat marker
var location;
var marker;
function addMarker(lat, lng, info){
location = new google.maps.LatLng(lat, lng);
bounds.extend(location);
marker = new google.maps.Marker({
map: map,
position: location
});
map.fitBounds(bounds);
bindInfoWindow(marker, map, infoWindow, info);
}
// Proses ini dapat menampilkan informasi lokasi Kota/Kab ketika diklik dari masing-masing markernya
function bindInfoWindow(marker, map, infoWindow, html){
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
}
</script>
</body>
</html>8. Penjelasan masing-masing proses sudah dijelaskan pada komentar-komentar di atasnya.
9. Sebenarnya kalau diperhatikan baik-baik, cara kerja script di atas adalah dengan menghubungkan script PHP ke database untuk menampilkan data berupa nama kota/ kab dan titik koordinat/ latitude longitude. Bila script tersebut Anda jalankan, maka akan memunculkan peta Google Maps yaitu Dynamic Maps yang menampilkan sebaran beberapa titik-titik kota dan kabupaten di Indonesia, seperti di bawah ini:
Bagaіmana? Mudah bukan?
Jika Anda mengalami kesulitan bagaimana cara implementasi sederhana dari Google Maps Platform menggunakan PHP dan MySQL, Terralogiq dapat membantu Anda karena kami adalah Penyedia jasa layanan Google Maps dan penyedia jasa layanan Google Maps di Indonesia satu-satunya dengan status sebagai Premier Partner. Anda bisa menghubungi kami melalui alamat email halo@terralogiq.com atau jadwalkan untuk berkonsultasi langsung bersama kami dengan mengisi form dibawah ini:
carissa@terralogiq.com 
Carissa
