Menampilkan markers google maps api dengan php dan mysqli

Diartikel ini kita akan belajar membuat peta lokasi yang menggunakan Google Maps API. Lokasi tersebut akan ditandai oleh Marker dan data Marker tersebut akan diambil dari MySQL sehingga data peta nanti bersifat dinamis. Sebelum kita mulai, anda harus mempunyai Google Maps API Key (untuk web) terlebih dahulu. API Key tersebut anda bisa mendapatkannya di https://developers.google.com/maps/web/ , cukup dengan klik tombol Get A Key.

Pendahuluan

Di Map yang akan kita buat ini, kita akan menampilkan (secara default) peta Indonesia dengan beberapa lokasi yang ditandai oleh markers, kemudian jika markers tersebut di klik, maka menampilkan informasi (InfoWindow) berupa alamat lengkap.

Data markers yang disimpan pada tabel di MySQL berformat DD (decimal degree) ,perlu diperhatikan jika anda mempunyai data lokasi berformat DMS (degrees, minutes, seconds)  dan ingin menampilkannya di tutorial ini, maka anda harus melakukan konversi terlebih dahulu ke format DD .

Persiapan Data

Buat dahulu Database baru bernama map dan tabel bernama lokasi.Ditabel lokasi kita buat 4 kolom yaitu lokasi_id, lat, long dan alamat.

lokasi (table)

Data table lokasi

Jika anda ingin menggunakan sample data (berserta script table) yang saya gunakan,dapat didownload di Google Drive saya.

Buat File Koneksi

buat file bernama koneksi.php, ketik kode berikut:

<?php 
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'map');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

Buat File Map

buat lagi file php bernama map.php, karena script

cukup panjang, anda bisa mendownload nya di Google Drive saya (lagi).

note : pastikan file koneksi.php dan map.php berada dalam satu folder yang sama di c:\xampp\htdocs\, lokasi folder htdocs tergantung dimana anda saat menginstal xampp :)

Penjelasan Kode

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

string API_KEY_ANDA diisi dengan API key yang anda punya.

<script type="text/javascript">
  var markers = [
  <?php
  $sql = mysqli_query($db, "SELECT * FROM lokasi");
  while(($data =  mysqli_fetch_assoc($sql))) {
  ?>
  {
     "lat": '<?php echo $data['lat']; ?>',
     "long": '<?php echo $data['long']; ?>',
     "alamat": '<?php echo $data['alamat']; ?>'
  },
  <?php
  }
  ?>
    ];
</script>

membuat array di javascript bernama markers, isi array (lat,long dan alamat) diambil dari tabel lokasi dengan looping menggunakan script PHP. Isi dari markers akan terlihat seperti berikut :

center: new google.maps.LatLng(-2.2459632,116.2409634),

atur posisi map berada di latlong Indonesia.

var infoWindow = new google.maps.InfoWindow();

var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

inisiasi infowindow dan google map, google map nanti berada dielement div dengan id dvMap.

for (i = 0; i < markers.length; i++) {

var data = markers[i];

var latnya = data.lat;

var longnya = data.long;

var myLatlng = new google.maps.LatLng(latnya, longnya);

var marker = new google.maps.Marker({

position: myLatlng,

map: map,

title: data.alamat

});

(function (marker, data) {

google.maps.event.addListener(marker, "click", function (e) {

infoWindow.setContent('<b>Lokasi</b> :' + data.alamat + '<br>');

infoWindow.open(map, marker);

});

})(marker, data);

}

lakukan looping sebanyak data pada array markers, disini juga dilakukan penambahan marker sesuai koordinat latlong dan menambahkan event addlistener click pada marker agar menampilkan infowindow ketika marker di klik oleh user :).

Hasilnya:

Klik salah satu marker, maka akan muncul InfoWindow :

Semoga Bermanfaat

Artikel ini dibuat oleh Yudha Tri Putra sebagai penulis artikel, diperbolehkan menyalin artikel ini secara utuh tanpa mengubah atau menambah isi artikel.