Menampilkan marker google maps dari database

Dalam edisi tutorial Google Maps sebelumnya, kita telah mengdiskusikan tentang tatacara/tahapan pembuatan sebuah marker dan multipler marker pada sebuah lokasi pada google maps. 

Namun semua lokasi dalam bentuk kordinat (latitude, longtitued), datanya telah kita definisikan pada kodingnya, bersifat statis.

Sekarang kita akan membuat marker pada sebuah lokasi atau lebih, dimana data lokasinya diambil dari database.

Berikut ini adalah output yang akan kita buat, seperti yang ditunjukkan oleh Gambar.1 dibawah ini:

Gambar.1

Tahapan membuat marker pada Google Map

1. Buat database
Pembuatan database bertujuan untuk menyimpan informasi lokasi (latitude,longtitude) serta informasi begitu marker diklik. Dalam contoh ini, kita memberinama databasenya : googlemaps

CREATE TABLE IF NOT EXISTS `data_location` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `desc` varchar(255) NOT NULL,
  `lat` float(10,6) NOT NULL,
  `lon` float(10,6) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

INSERT INTO `data_location` (`id`, `desc`, `lat`, `lon`) VALUES
(1, 'Ibukota Provinsi Aceh', 5.550176, 95.319260),
(2, 'Ibukota Kab.Aceh Jaya', 4.727890, 95.601372),
(3, 'Ibukota Abdya', 3.818570, 96.831841),
(4, 'Ibukota Kotamadya Langsa', 4.476020, 97.952446),
(5, 'Ibukota Kotamadya Sabang', 5.909284, 95.304741);

Script diatas untuk membuat tabel yang bernama data_location seperti yang ditunjukkan Gambar.2:

Gambar.2

2. Membuat file connect.php
File ini bertujuan untuk membangun koneksi dengan database :

<?php
$con=mysqli_connect("localhost","root","","googlemap");
?>

3. Script agar terhubung ke server Google Maps 
Script ini bertujuan agar web kita terhubung dengan server Google Maps:

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Parameter sensor diset false, karena kita akan menentukan sendiri lokasinya.

4. Mempersiapkan variabel-variabel Google Maps API

// 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();

Dalam langkah ke-4 ini, kita perlu mempersiapkan variabel untuk menampung :

• var InfoWindow, digunakan untuk menampung informasi, dalam hal ini nantinya kita akan menampung data dari field desc dari database googlemaps.
• var mapOptions, digunakan untuk menyimpan tipe peta RoadMap. Jenis peta lain yang dapat didukung : SATELLITE (photographic map), HYBRID (photographic map + road and city names), TERRAIN (map with mountains, rivers).
• var map, digunakan untuk menyimpan object peta.
• var bounds digunakan untuk menampung batas kordinat dari sebuah lokasi

5.  Script php untuk mengambil data dari database
Pada tahap ini kita akan mengambil data-data dari database :

<?php
    $query = mysqli_query($con,"select * from data_location");
    while ($data = mysqli_fetch_array($query))
    {
        $nama = $data['desc'];
        $lat = $data['lat'];
        $lon = $data['lon'];
        
        echo ("addMarker($lat, $lon, '<b>$nama</b>');\n");                        
    }
 ?>

6. Proses pembuatan marker
Data-dari langkah ke-5 akan dikirimkan ke fungsi addMarker agar dilakukakn proses pembuatan markernya :

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);
 }

7. Menampilkan informasi pada marker yang diklik
Tahap ini memberi event click, jadi ketika setiap marker diklik maka akan ditampilkan informasi dari keterangan marker tersebut :

// 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);
  });
}

Kode lengkap untuk marker Google Map dari database

Dalam contoh ini, kita akan memanggil data dari database dan membuat marker untuk lokasi : Banda Aceh, Sabang, Calang, Langsa dan Blangpidie serta akan ditampilkan masing-masing informasi begitu salah satu marker diklik.

<?php include "connect.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="ilmu-detil.blogspot.com">
    <title>Multi Marker Map </title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    
    <!-- Bagian js -->
    <script src='assets/js/jquery-1.10.1.min.js'></script>       
    
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- akhir dari Bagian js -->
    <script src="http://maps.google.com/maps/api/js?sensor=false"></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 = mysqli_query($con,"select * from data_location");
            while ($data = mysqli_fetch_array($query))
            {
                $nama = $data['desc'];
                $lat = $data['lat'];
                $lon = $data['lon'];
                
                echo ("addMarker($lat, $lon, '<b>$nama</b>');\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>
    
</head>
<body onload="initialize()">
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
            Pusat Ilmu Secara Detil</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="index.html">Home</a></li>
                <li class="clr2"><a href="">Programming</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</nav>
</br></br></br></br>
<!--- Bagian Judul-->   
<div class="container" style="margin-top:10px"> 

    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">Marker Google Maps</div>
                    <div class="panel-body">
                        <div id="map-canvas" style="width: 700px; height: 600px;"></div>
                    </div>
            </div>
        </div>  
    </div>
</div>  
</body>
</html>