Cara Membuat Marker Google Maps PHP MySQL

Pada kesempatan baik ini kami akan memberikan sebuah tutorial tentang bagaimana Cara Membuat Marker Google Maps PHP MySQL, menampilkan peta lokasi google maps berdasarkan titik koordinat latitude dan longitude suatu wilayah tertentu kemudian ditandai dengan marker google maps. Sebagai contoh adalah peta lokasi Jawa Tengah dengan koordinat latitude -7.150975 dan longitude 110.1402594, kemudian peta lokasi Jawa Barat dengan koordinat latitude -7.090911 dan longitude 107.668887. Nama provinsi, latitude, dan longitude tersebut harus kita insert terlebih dulu ke dalam database sebagai data, maka jika kita jalankan kode PHP dengan query MySQL memanggil data tersebut secara otomatis peta lokasi google maps provinsi akan tampil beserta markernya. Yap, peta lokasi Jawa Tengah dan Jawa Barat akan tampil dan masing-masing memiliki marker sendiri.

Tutorial cara membuat marker google maps PHP MySQL lengkap dengan script PHP, JavaScript dan query MySQL ini, kami lakukan pada sistem operasi Windows 7, menggunakan web server XAMPP ver 5.6.3 include dengan database MySQL, dan web browser Mozilla Firefox. Untuk mengikuti tutorial ini pastikan komputer anda telah completed install web server XAMPP tersebut.

Berikut langkah - langkah atau tutorial cara membuat marker google maps PHP MySQL yang semoga bermanfaat tentunya:

Cara Membuat Marker Google Maps PHP MySQL

1. Desain database beserta table dan atributnya, kemudian insert data sehingga memiliki data seperti gambar berikut;

Cara Membuat Marker Google Maps PHP MySQL

2. Buat kode JavaScript dan PHP untuk menampilkan peta dan sekaligus membuat marker google maps. Ketik kodenya seperti berikut, simpan sebagai index.php

<script src="jquery-1.10.1.min.js"></script>
<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YourAPIkey">
</script>
<script>	
    var marker;
	function initialize() {  
		// Variabel untuk menyimpan informasi (desc)
		var infoWindow = new google.maps.InfoWindow;
		//  Variabel untuk menyimpan peta Roadmap
		var mapOptions = {
			mapTypeId: google.maps.MapTypeId.ROADMAP
        } 
		// Pembuatan petanya
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);      
        // Variabel untuk menyimpan batas kordinat
		var bounds = new google.maps.LatLngBounds();
		// Pengambilan data dari database
		<?php
			$query = mysql_query("SELECT * FROM tb_provinsi");
			while ($data = mysql_fetch_array($query)) {
				$nama	=$data['nama_provinsi'];
				$lat	=$data['latitude'];
				$lon	=$data['longitude'];
				echo ("addMarker($lat, $lon, '$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: map,
				position: lokasi
			});       
			map.fitBounds(bounds);
			bindInfoWindow(marker, map, infoWindow, info);
		 }		
		// Menampilkan informasi pada masing-masing marker yang diklik
		function bindInfoWindow(marker, map, infoWindow, html) {
			google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }
	}
	google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" class="col-sm-12" style="height:380px;"></div>

Yuk kita bahas kode JavaScript dan PHP untuk membuat marker google maps di atas sedikit lebih detail agar mudah dipahami.

Pertama, kode pada baris 1 berikut;

<script src="jquery-1.10.1.min.js"></script>

Yap, kita membutuhkan jQuery-1.10.1, atau jQuery lainnya juga bisa, mari kita download jQuery tersebut

Kedua, kode pada baris 2-4 berikut;

<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YourAPIkey">
</script>

Key=YourAPIkey..., teryata kita membutuhkan Google Maps API Key. API Key ini dapat diperoleh secara mudah dan gratis menggunakan Akun Google. Dapatkan API Key disini Google Maps API Key

Ketiga, kode pada baris 19-27 berikut;

<?php
	$query = mysql_query("SELECT * FROM tb_provinsi");
	while ($data = mysql_fetch_array($query)) {
		$nama	=$data['nama_provinsi'];
		$lat	=$data['latitude'];
		$lon	=$data['longitude'];
		echo ("addMarker($lat, $lon, '<b>$nama</b>');\n");                        
	}	
?> 

Di atas adalah kode PHP untuk membuat marker google maps, datanya kita ambil dari database MySQL yang telah kita insert sebelumnya, terdapat tiga atribut yang kita ambil yaitu, nama, latitude, dan longitude. Tentunya, kita bebas mengembangkan manipulasi query tersebut

Keempat, kode pada baris terakhir berikut;

<div id="map-canvas" class="col-sm-12" style="height:380px;"></div>

Di atas adalah kode HTML untuk menampilkan peta lokasi google maps, dengan id=map-canvas, id ini harus sama dengan id yang kita buat pada kode JavaScript di atas

3. Jalankan XAMPP kemudian aktifkan Apache dan MySQL. Kita jalankan script PHP dengan nama file index.php di atas, semoga hasilnya seperti berikut;

Cara Membuat Marker Google Maps PHP MySQL

Tutorial Cara Membuat Marker Google Maps PHP MySQL

Download Marker Google Maps PHP

Marker Google Maps PHP

4. Selesai.

Sekian penjelasan dari kami tentang bagaimana Cara Membuat Marker Google Maps PHP MySQL, lengkap dengan tutorial scriptnya. Untuk mendapatkan source code nya Anda dapat langsung mendownload melalui link di atas, jika link download tidak aktif atau error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :

• Script PHP Export To Excel
• Script PHP Update Database MySQL | CRUD
• Script Tampil Database dengan PHP MySQL | VIEW Data
• Cara Membuat Laporan PDF dengan PHP dan MySQL
• Cara Membuat Script Login Multiuser dengan PHP dan MySQL
• Membuat form login dan logout dengan PHP dan MySQL
• Script PHP untuk Cari Data pada Database MySQL
• Membuat Form dan Script Edit Data dengan PHP MySQL

Cara Membuat Marker Google Maps PHP MySQL

Tags: script marker google maps php mysqli, marker google maps php mysql, membuat marker google maps, marker google maps, marker google maps php, cara membuat marker google maps php mysql