rachmat

Current Date: 1 June, 2020

Google Maps API: Cara Menampilkan Marker Lokasi dengan PHP dan MySQL

Google Maps adalah layanan pemetaan web yang dikembangkan oleh Google. Layanan ini memberikan citra satelit, peta jalan, panorama 360°, kondisi lalu lintas, dan perencanaan rute untuk bepergian dengan berjalan kaki, mobil, sepeda motor, sepeda atau angkutan umum.
5
(8)

Hallo sobat, melanjutkan tulisan Saya sebelumnya tentang Google Maps API: Membuat Marker untuk Menandai Lokasi pada Peta, kali ini Saya 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 Saya 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 Saya 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:

Google Maps API: Cara Menampilkan Marker Lokasi dengan PHP dan MySQL

Selesai. Sangat mudah kan?

Demikian pembahasan tentang Google Maps API: Cara Menampilkan Marker Lokasi dengan PHP dan MySQL, silahkan tinggalkan komentar pada tulisan ini bila ingin bertanya atau memberi masukan. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca, sampai bertemu di tulisan berikutnya. Terima Kasih

Apakah artikel ini membantu Anda?

klik bintang untuk memberikan nilai

Total nilai 5/5 dari 8 suara

Tidak ada suara sejauh ini! Jadilah yang pertama memberi nilai pada tulisan ini.

6 Komentar

  1. RF99 Reply

    Permisi, cara menyembunyikan ini bagaimana? link gambar : https://imgur.com/a/pkolkGd

    soalnya notif tersebut mempengaruhi posisi tabel yang saya buat.. apakah ada cara utk menghilangkan notif tersebut, setiap menambahkan data akan terus keluar.. terima kasih sebelumnya tutorial yang bermanfaat 🙂

  2. kunjangan Reply

    min saya apresiasi sekali dengan adanya web ini, bisa lebih banyak bisa ngeksplore dunia mobile development lagi!! saya senantiasa ngeklik iklan apapun disini! saya nyari iklan nya dari tadi ko gk ada ya min?? saya gk punya adblok dan segala teman nya, bingung juga knapa

Leave a Reply

Your email address will not be published. Required fields are marked *