Cara Menampilkan Marker Lokasi Google Maps dengan PHP dan MySQL

Cara Menampilkan Marker Lokasi Google Maps dengan PHP dan MySQL

by

Kursusku.id – Google Maps adalah salah satu layanan peta online yang paling populer dan banyak digunakan di dunia. Google Maps menyediakan berbagai fitur dan fungsi yang dapat membantu kita untuk menampilkan, mencari, dan menavigasi lokasi di seluruh dunia. Salah satu fitur yang cukup berguna adalah marker, yaitu simbol atau ikon yang dapat menandai lokasi tertentu di peta. Marker dapat digunakan untuk menunjukkan informasi, arah, atau tujuan yang ingin kita sampaikan kepada pengguna peta.

Namun, bagaimana jika kita ingin menampilkan marker lokasi Google Maps dengan data yang berasal dari database MySQL sendiri? Misalnya, kamu memiliki sebuah website yang menyediakan informasi tentang tempat-tempat wisata di Indonesia, dan kita ingin menampilkan marker lokasi Google Maps untuk setiap tempat wisata tersebut. Bagaimana cara membuatnya?

Tenang, kamu tidak perlu khawatir. Dalam artikel ini, saya akan menjelaskan cara menampilkan marker lokasi Google Maps dengan PHP dan MySQL dengan mudah dan cepat. Kamu hanya perlu mengikuti langkah-langkah berikut ini:

Persiapan Database MySQL

Langkah pertama yang harus kita lakukan adalah membuat database MySQL yang akan menyimpan data lokasi yang ingin kita tampilkan di peta. Database ini akan berisi sebuah tabel yang memiliki kolom-kolom seperti id, nama_lokasi, latitude, dan longitude. Id adalah kolom yang berfungsi sebagai kunci utama atau primary key, yang akan membedakan setiap baris data. Nama_lokasi adalah kolom yang berisi nama dari lokasi yang ingin kita tampilkan. Latitude dan longitude adalah kolom yang berisi koordinat geografis dari lokasi tersebut, yang akan digunakan untuk menentukan posisi marker di peta.

Untuk membuat database MySQL ini, kita bisa menggunakan aplikasi phpMyAdmin, yang merupakan salah satu alat manajemen database MySQL yang populer dan mudah digunakan. Berikut adalah langkah-langkah untuk membuat database MySQL dengan phpMyAdmin:

  1. Buka aplikasi phpMyAdmin di browser kamu, dan masukkan username dan password yang sesuai.
  2. Klik menu Database, dan masukkan nama database yang kamu inginkan. Misalnya, kita beri nama “googlemaps”. Lalu, klik tombol Buat.
  3. Setelah database berhasil dibuat, klik nama database tersebut, dan klik menu SQL untuk memasukkan perintah SQL yang akan membuat tabel lokasi. Berikut adalah perintah SQL yang bisa kamu gunakan:
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;

ALTER TABLE `lokasi`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `lokasi`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

Perintah SQL di atas akan membuat tabel lokasi dengan struktur yang sesuai dengan yang kita inginkan. Kita juga menambahkan beberapa perintah tambahan untuk membuat id menjadi kunci utama dan auto increment, sehingga nilai id akan otomatis bertambah setiap kali kita menambahkan data baru.

Klik tombol Go untuk menjalankan perintah SQL tersebut, dan pastikan tidak ada pesan error yang muncul. Jika berhasil, maka tabel lokasi akan terbentuk di database googlemaps.

Menambahkan Data Lokasi ke Tabel MySQL

Langkah selanjutnya adalah menambahkan data lokasi yang ingin kita tampilkan di peta ke tabel lokasi yang sudah kita buat. Data lokasi ini bisa berupa nama-nama tempat wisata, kota, provinsi, atau apapun yang kamu inginkan. Yang penting, kamu harus mengetahui nilai latitude dan longitude dari setiap lokasi tersebut, karena itu yang akan menentukan posisi marker di peta.

Untuk mengetahui nilai latitude dan longitude dari suatu lokasi, kamu bisa menggunakan bantuan Google Maps. Caranya adalah sebagai berikut:

  1. Buka Google Maps di browser kamu, dan ketikkan nama lokasi yang kamu cari di kotak pencarian. Misalnya, kita ingin mencari nilai latitude dan longitude dari Jakarta.
  2. Setelah lokasi tersebut muncul di peta, klik kanan di lokasi tersebut, dan pilih opsi “What’s here?”.
  3. Di bagian bawah layar, kamu akan melihat sebuah kotak yang berisi nilai latitude dan longitude dari lokasi tersebut, dipisahkan oleh koma. Misalnya, untuk Jakarta, nilai latitude dan longitudenya adalah -6.208760, 106.845599.
  4. Salin nilai latitude dan longitude tersebut, dan simpan di tempat yang aman. Ulangi langkah ini untuk setiap lokasi yang ingin kamu tambahkan ke tabel MySQL.

Setelah kamu mendapatkan nilai latitude dan longitude dari semua lokasi yang ingin kamu tampilkan di peta, sekarang saatnya untuk menambahkan data lokasi tersebut ke tabel lokasi di database MySQL. Ada beberapa cara untuk melakukan ini, tapi cara yang paling mudah adalah dengan menggunakan fitur Insert yang disediakan oleh phpMyAdmin. Berikut adalah langkah-langkahnya:

  1. Buka kembali aplikasi phpMyAdmin di browser kamu, dan pilih database googlemaps yang sudah kita buat sebelumnya.
  2. Klik nama tabel lokasi, dan klik menu Insert untuk memasukkan data baru ke tabel tersebut.
  3. Di halaman Insert, kamu akan melihat empat kolom yang sesuai dengan struktur tabel lokasi, yaitu id, nama_lokasi, latitude, dan longitude. Isi kolom-kolom tersebut dengan data lokasi yang kamu miliki. Untuk kolom id, kamu bisa biarkan kosong, karena nilai id akan otomatis terisi sesuai dengan urutan data. Misalnya, kita ingin menambahkan data lokasi Jakarta ke tabel lokasi. Maka, kita isi kolom nama_lokasi dengan “Jakarta”, kolom latitude dengan “-6.208760”, dan kolom longitude dengan “106.845599”.
  4. Klik tombol Go untuk menyimpan data tersebut ke tabel lokasi. Jika berhasil, maka data tersebut akan muncul di halaman Browse, dan kamu akan melihat nilai id yang sudah terisi secara otomatis.
  5. Ulangi langkah ini untuk setiap data lokasi yang ingin kamu tambahkan ke tabel lokasi. Kamu bisa menambahkan sebanyak mungkin data lokasi yang kamu inginkan, asalkan tidak melebihi kapasitas database MySQL kamu.

Setelah kamu selesai menambahkan data lokasi ke tabel MySQL, maka langkah persiapan database MySQL sudah selesai. Sekarang, kita bisa lanjut ke langkah berikutnya, yaitu membuat kode PHP yang akan mengambil data lokasi dari database MySQL dan menampilkannya di peta Google Maps.

Membuat Kode PHP untuk Menampilkan Marker Lokasi Google Maps

Langkah terakhir yang harus kita lakukan adalah membuat kode PHP yang akan mengambil data lokasi dari database MySQL dan menampilkan marker lokasi Google Maps di peta. Kode PHP ini akan berisi beberapa bagian, yaitu:

  1. Koneksi ke database MySQL, yang akan memungkinkan kita untuk mengakses data lokasi yang sudah kita simpan di tabel lokasi.
  2. Query SQL, yang akan mengambil data lokasi dari tabel lokasi dan menyimpannya dalam sebuah array asosiatif.
  3. Kode HTML, yang akan menampilkan peta Google Maps di halaman web, dan juga menyertakan skrip JavaScript yang diperlukan untuk menampilkan marker lokasi Google Maps.
  4. Kode JavaScript, yang akan mengambil data lokasi dari array asosiatif PHP, dan membuat marker lokasi Google Maps untuk setiap data lokasi tersebut, serta menambahkan event listener untuk menampilkan info window yang berisi nama lokasi ketika marker diklik.

Berikut adalah kode PHP yang bisa kamu gunakan untuk menampilkan marker lokasi Google Maps dengan PHP dan MySQL:

<?php
// Koneksi ke database MySQL
$host = "localhost"; // nama host yang digunakan
$user = "root"; // nama user yang digunakan
$pass = ""; // password yang digunakan
$db = "googlemaps"; // nama database yang digunakan
$conn = mysqli_connect($host, $user, $pass, $db); // membuat koneksi ke database
if (!$conn) { // jika koneksi gagal, tampilkan pesan error
  die("Connection failed: " . mysqli_connect_error());
}

// Query SQL untuk mengambil data lokasi dari tabel lokasi
$sql = "SELECT * FROM lokasi"; // perintah SQL yang digunakan
$result = mysqli_query($conn, $sql); // menjalankan query SQL dan menyimpan hasilnya dalam variabel result
$data = array(); // membuat array kosong untuk menyimpan data lokasi
if (mysqli_num_rows($result) > 0) { // jika ada data yang ditemukan
  while($row = mysqli_fetch_assoc($result)) { // mengambil data per baris dan menyimpannya dalam variabel row
    $data[] = $row; // menambahkan data row ke array data
  }
}
mysqli_close($conn); // menutup koneksi ke database
?>

<html>
<head>
  <title>Menampilkan Marker Lokasi Google Maps dengan PHP dan MySQL</title>
  <style>
    /* Menentukan ukuran dan gaya peta */
    #map {
      height: 500px;
      width: 800px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Menampilkan Marker Lokasi Google Maps dengan PHP dan MySQL</h1>
  <div id="map"></div> <!-- Tempat untuk menampilkan peta Google Maps -->
  <script>
    // Menyertakan skrip Google Maps API
    function loadScript() {
      var script = document.createElement("script");
      script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap";
      document.body.appendChild(script);
    }
    window.onload = loadScript;

    // Fungsi untuk menginisialisasi peta Google Maps
    function initMap() {
      // Menentukan opsi peta, seperti pusat peta, zoom level, dan tipe peta
      var mapOptions = {
        center: new google.maps.LatLng(-2.548926, 118.0148634), // koordinat Indonesia
        zoom: 5, // zoom level 5
        mapTypeId: google.maps.MapTypeId.ROADMAP // tipe peta jalan
      };
      // Membuat objek peta Google Maps dan menempatkannya di elemen div dengan id map
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);

      // Mengambil data lokasi dari array asosiatif PHP
      var data = <?php echo json_encode($data); ?>; // mengubah array asosiatif PHP menjadi format JSON
      data = JSON.parse(data); // mengubah format JSON menjadi objek JavaScript

      // Membuat marker lokasi Google Maps untuk setiap data lokasi
      for (var i = 0; i < data.length; i++) {
        // Menentukan koordinat marker dari nilai latitude dan longitude data lokasi
        var position = new google.maps.LatLng(data[i].latitude, data[i].longitude);
        // Membuat objek marker Google Maps dan menempatkannya di peta
        var marker = new google.maps.Marker({
          position: position, // koordinat marker
          map: map, // peta yang digunakan
          title: data[i].nama_lokasi // judul marker
        });
        // Membuat objek info window Google Maps yang berisi nama lokasi
        var infoWindow = new google.maps.InfoWindow({
          content: data[i].nama_lokasi // isi info window
        });
        // Menambahkan event listener untuk menampilkan info window ketika marker diklik
        google.maps.event.addListener(marker, 'click', function() {
          infoWindow.open(map, this); // membuka info window di peta dan marker yang diklik
        });
      }
    }
  </script>
</body>
</html>

Kode PHP di atas akan menghasilkan output seperti ini:

Seperti yang bisa kamu lihat, peta Google Maps sudah berhasil ditampilkan di halaman web, dan setiap data lokasi yang ada di tabel MySQL sudah ditampilkan sebagai marker lokasi Google Maps di peta. Kamu juga bisa mengklik marker tersebut untuk melihat info window yang berisi nama lokasi.

Kesimpulan

Dalam artikel ini, kita telah belajar cara menampilkan marker lokasi Google Maps dengan PHP dan MySQL. Kamu telah melakukan beberapa langkah, yaitu:

  1. Membuat database MySQL yang berisi tabel lokasi, yang menyimpan data lokasi yang ingin di tampilkan di peta.
  2. Menambahkan data lokasi ke tabel MySQL, dengan menggunakan nilai latitude dan longitude yang didapatkan dari Google Maps.
  3. Membuat kode PHP yang mengambil data lokasi dari database MySQL dan menampilkan marker lokasi Google Maps di peta, dengan menggunakan Google Maps API, HTML, dan JavaScript.

Dengan cara ini, kita bisa membuat peta interaktif yang menampilkan informasi yang berasal dari database MySQL kita sendiri. Kita juga bisa menyesuaikan data lokasi yang ingin di tampilkan, dengan menambahkan, mengubah, atau menghapus data di tabel MySQL. Kamu juga bisa menyesuaikan tampilan dan fungsi peta, dengan mengubah opsi dan skrip Google Maps API sesuai dengan kebutuhan kita.

Demikian artikel yang bisa saya buat tentang menampilkan marker lokasi Google Maps dengan PHP dan MySQL. Semoga artikel ini bermanfaat dan membantu kamu dalam membuat peta interaktif dengan PHP dan MySQL. Terima kasih telah membaca artikel ini, dan sampai jumpa di artikel selanjutnya.

Leave a Comment