BLANTERORBITv102

    Cara Membuat Aplikasi Google Maps Dengan PHP dan MySQL

    Minggu, 03 Juli 2016
    Google maps dengan php dan mysql
    Google Maps Dengan PHP dan MySQL
    Data lokasi yang statis atau yang di tuliskan secara langsung pada baris kode java script tentu sangat tidak efisien bagi developer google maps, terutama dalam pembuatan titik lokasi yang cukup banyak. Titik-titik ini jika di ketikan dalam baris kode java script akan dibentuk sebagai array, dan kemudian dipanggil menggunakan perulangan. Dari sinilah titik atau marker ditampilkan berdasarkan latitude dan longitude nya. Lalu bagaimana jika titik-titik ini selalu bertambah dengan lokasi yang berbeda-beda? Tentu developer harus membongkar dan menambah lagi di baris java script nya. 

    Dengan adanya bahasa pemrograman PHP dan database MySQL (atau database lain), pembuatan maps akan lebih mudah terutama dalam menampilkan titik-titik yang bersifat dinamis. PHP dapat kita guanakan sebagai proses dalam pengambilan data pada database, sedangkan MySQL dapat digunakan dalam penyimpanan lokasi.

    Membuat Database
    Database yang kita gunakan saat ini sangat sederhana, kita akan membuat sebuah program yang menampilkan marker/titik layanan publik seperti atm, bank, dan spbu. Silahkan insert query dibawah ini pada MySQL anda (phpmyadmin).
    CREATE TABLE `tabel_data` (
      `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
      `latitude` decimal(10,7) NOT NULL,
      `longitude` decimal(10,7) NOT NULL,
      `keterangan` varchar(255) NOT NULL,
      `kategori` enum('SPBU','ATM','BANK') NOT NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

    Membuat Koneksi Database dan Fungsi CRUD
    Buat file koneksi dengan nama file conf.php, file ini berisi koneksi ke database dan fungsi untuk CRUD pada aplikasi. Silahkan ketik kode program dibawah ini.
    <?php
    /**
    * Dibuat Oleh Hady Eka Saputra || www.java-sc.com
    */
    class konfigurasi {
       public function __construct() {
        try {
         $host = "localhost";
         $db = "tutor_gmaps";
         $user = "root";
         $pass = "";
         $this->db = new PDO('mysql:host='.$host.';dbname='.$db.'',''.$user.'',''.$pass.'');
         $this->db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
         // echo "Berhasil terkoneksi !";
        }
        catch (PDOException $e) {
         echo $e->getMessage();
        }
       }
    public function getXMLData($tabel){
       $getXMLData = $this->db->prepare("SELECT * FROM $tabel");
       $getXMLData->execute();
       return $getXMLData;
    }
    public function tampil($tabel , $id){
       $tampil = $this->db->prepare("SELECT * FROM $tabel ORDER BY $id DESC");
       $tampil->execute();
       return $tampil;
    }
    public function tampilBerdasarkanData($tabel , $kondisi ,$id){
       $tampil = $this->db->prepare("SELECT * FROM $tabel WHERE $kondisi='$id'");
       $tampil->execute();
       return $tampil;
    }
    public function tambah($tabel , $latitude,$longitude,$keterangan,$kategori){
       $tambah = $this->db->prepare("INSERT INTO $tabel (id, latitude, longitude, keterangan, kategori) VALUES (NULL,'$latitude','$longitude','$keterangan','$kategori') ");
       $tambah->execute();
       return $tambah;
    }
    public function ubah($tabel , $latitude,$longitude,$keterangan,$kategori,$kondisi,$nilai){
       $ubah = $this->db->prepare("UPDATE $tabel SET latitude='$latitude', longitude='$longitude', keterangan='$keterangan', kategori='$kategori' WHERE $kondisi='$nilai'");
       $ubah->execute();
       return $ubah;
    }
    public function hapus($tabel , $kondisi,$nilai){
       $hapus = $this->db->prepare("DELETE FROM $tabel WHERE $kondisi='$nilai'");
       $hapus->execute();
       return $hapus;
    }
    }
    
    
    ?>

    Membuat File Data XML
    File ini nantinya akan menjadikan data pada database berupa data XML, buatlah file bernama koordinat.php dan isikan dengan kode berikut ini.
    <?php
    include 'conf.php';
    $konfigurasi = new konfigurasi();
    $getData = $konfigurasi->getXMLData('tabel_data');
    header("Content-type: text/xml");
    try {
      echo "<markers>";
        while ($result = $getData->fetch(PDO::FETCH_OBJ)) {
        if ($getData->rowCount() < 1) {
         echo "<marker Data Kosong />";
        }
        else {
         echo "<marker ";
         echo "a='" . $result->id. "' ";
         echo "b='" . $result->latitude. "' ";
         echo "c='" . $result->longitude. "' ";
         echo "d='" . $result->keterangan. "' ";
         echo "e='" . $result->kategori. "' ";
         echo "/>";
        }
       }
      echo "</markers>";
    }
    catch (PDOException $e) {
       echo $e->getMessage();
    }
    
    
    ?>

    Design dan Komponen
    Pada pembuatan design CRUD yang digunakan dalam pembuatan aplikasi maps, anda dapat menggunakan file komponen berikut

    Download Komponen

    File Header
    File header berisi link css dan beberapa javascript, buatlah file header.php dan ketikan kode program di bawah ini.
    ><head>
       <title>Java Sc Developer</title>
       <link rel="stylesheet" type="text/css" href="assets/bootstrap.css">
       <link rel="stylesheet" type="text/css" href="assets/dataTables.bootstrap.css">
       <script type="text/javascript" src="assets/jquery-1.11.1.js"></script>
       <script async defer src="https://maps.googleapis.com/maps/api/js?key=ISI DENGAN API KEY ANDA&callback=initMap">
        </script>
    </head>

    File Footer
    File footer ini berisi semua script yang akan digunakan pada aplikasi. buatlah sebuah file footer.php dan ketikan kode program dibawah ini.
    <script src="https://use.fontawesome.com/2642b88c56.js"></script>
    <script type="text/javascript" src="assets/bootstrap.js"></script>
    <script type="text/javascript" src="assets/jquery.dataTables.js"></script>
    <script type="text/javascript" src="assets/dataTables.bootstrap.js"></script>
    <script type="text/javascript">
       $(document).ready(function() {
            $('#table').DataTable({
                    responsive: true,
                    paging: true,
            });
       });
     </script>

    Membuat Halaman Utama
    Halaman utama di dalam nya berisi file include dari beberapa file yang memiliki fungsi sebagai header, footer, input,  configurasi, dan home. Buatlah file index.php dan ketikan kode program dibawah.
    <!DOCTYPE html>
    <?php
    if (isset($_GET['page']) == null) {
     header("location:index.php?page=home");
    }
    include 'conf.php';
    $konfigurasi = new konfigurasi();
    ?>
    <html>
    <?php include 'header.php'; ?>
    <body style="margin-top:10px">
     <div class="container">
     <?php
     switch ($_GET['page']) {
       case 'kelola':
        include 'input.php';
       break;
       default:
        include 'home.php';
       break;
       }
     ?>
     </div>
    </body>
    <?php include 'footer.php'; ?>
    </html>

    Membuat Page Home
    Buatlah sebuah file bernama home.php dalam folder dan kemudian masukan source code berikut ini.
    <style type="text/css">
      .gm-style-iw {color: #000000;margin: 0 0 0 0}
      .gmnoprint div {color: #000000;}
    </style>
    <script type="text/javascript">
        function initMap() {
          var map;
          var styleGMaps = [
      {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
          { "visibility": "on" },
          { "invert_lightness": true },
          { "gamma": 1.96 },
          { "lightness": -65 },
          { "saturation": 53 },
          { "hue": "#00e5ff" },
          { "weight": 0.2 },
          { "color": "#dd6630" }
        ]
      },{
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [
          { "invert_lightness": true },
          { "lightness": 33 },
          { "gamma": 0.84 },
          { "hue": "#0008ff" },
          { "visibility": "on" },
          { "saturation": 38 },
          { "weight": 2.2 },
          { "color": "#4f90f4" }
        ]
      },{
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
          { "visibility": "on" },
          { "invert_lightness": true },
          { "color": "#ffb147" },
          { "saturation": 23 },
          { "hue": "#ff9100" },
          { "lightness": -30 },
          { "gamma": 4.09 },
          { "weight": 2.1 }
        ]
      },{
        "featureType": "landscape.natural",
        "elementType": "geometry.fill",
        "stylers": [
          { "visibility": "on" },
          { "lightness": -14 },
          { "color": "#5cae8e" },
          { "weight": 0.4 },
          { "saturation": 34 },
          { "gamma": 1.42 }
        ]
      }
    ];
    
          var styled = new google.maps.StyledMapType(styleGMaps,
            {name: "Styled Map"});
    
    
          var mapOptions = {
              center: {lat: 0.5163256, lng: 101.4437629},
              zoom:12,
              mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
              },
              mapTypeControl: false,
              zoomControl: false,
              scaleControl: false,
              streetViewControl: false,
              rotateControl: false,
              fullscreenControl: false
            };
    
    
          var mapAwal = {
              center: {lat: 0.5163256, lng: 101.4437629},
              zoom: 12 ,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map'),mapOptions);
          map.mapTypes.set('map_style', styled);
          map.setMapTypeId('map_style');
          var infoWindow = new google.maps.InfoWindow;
          downloadUrl("koordinat.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var latitude = parseFloat(markers[i].getAttribute("b"));
              var longitude = parseFloat(markers[i].getAttribute("c"));
              var keterangan = markers[i].getAttribute("d");
              var kategori = markers[i].getAttribute("e");
              var icon = 'assets/'+kategori+'.png' || {};
              var marker = new google.maps.Marker({
                map: map,
                position: {lat:latitude,lng:longitude},
                icon: icon,
              });
              bindInfoWindow(marker, map, infoWindow, keterangan);
            }
          });
        }
    
    
        function bindInfoWindow(marker, map, infoWindow, keterangan) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(keterangan);
            infoWindow.open(map, marker);
          });
        }
    
    
        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
    
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
            }
          };
    
    
          request.open('GET', url, true);
          request.send(null);
        }
    
    
        function doNothing() {}
    </script>
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-success">
            <div class="panel-heading">
                <center><h4>LOKASI PELAYANAN UMUM DI KOTA PEKANBARU</h4></center>
            </div>
            <div class="panel-body">
            <a href="index.php?page=kelola" class="btn btn-warning">Halaman Kelola</a>&nbsp<button class="btn btn-danger" onclick="location.reload()">Refresh Maps</button></br>
            </br>
              <div id="map" style="width:100%;height:450px" ></div>
            </div>
        </div>
      </div>
    </div>
    

    Membuat Page CRUD
    Terakhir adalah kode program untuk crud-nya, buatlah file dengan nama input.php dan isikan dengan kode program dibawah ini.
    <div class="col-md-12">
      <div class="row">
      <center><h3>Tutorials By Java Source Code</h3></center>
        <p class="alert alert-info"><strong>Kelola Data Lokasi</strong>&nbsp<a href="index.php?page=kelola&aksi=tambah" class="btn btn-primary"><i class="fa fa-plus"></i> Tambah</a>&nbsp<a href="index.php?page=home" class="btn btn-success"><i class="fa fa-arrow-left"></i> Kembali</a></p>
      </div>
      <div class="row">
       <?php 
        if ($_GET['page'] == 'kelola' && isset($_GET['hapus']) == 'true' && !empty($_GET['data']) ) {
         try {
          $delete = $konfigurasi->hapus('tabel_data','id',$_GET['data']);
          if ($delete) {
           echo "<script>alert('Data Lokasi Berhasil Dihapus');window.location.href = 'index.php?page=kelola'</script>";
          }
         }
         catch (PDOException $e) {
          echo $e->getMessage();
         }
        }
        else if ($_GET['page'] == 'kelola' && isset($_GET['aksi']) == 'tambah' && empty($_GET['data'])) {
         if (isset($_POST['simpan'])) {
          try {
           $insert = $konfigurasi->tambah('tabel_data',$_POST['latitude'],$_POST['longitude'],$_POST['keterangan'],$_POST['kategori']);
           if ($insert) {
            echo "<script>alert('Data Lokasi Berhasil Disimpan');window.location.href = 'index.php?page=kelola'</script>";
           }
          }
          catch (PDOException $e) {
           echo $e->getMessage();
          }
         }
         ?>
        <script type="text/javascript">
           function updateMarkerPosition(latLng) {
                document.getElementById('latitude').value = [latLng.lat()]
                document.getElementById('longitude').value = [latLng.lng()]
            }
            function initMap(){
           var map = new google.maps.Map(document.getElementById('maps'), {
               zoom: 14,
               center: new google.maps.LatLng(0.5163256, 101.4437629),
               mapTypeId: google.maps.MapTypeId.ROADMAP,
               mapTypeControl: false,         zoomControl: true,
             scaleControl: false,
             streetViewControl: false,
             rotateControl: false,
             fullscreenControl: false
           });
           var latLng = new google.maps.LatLng(0.5163256, 101.4437629);
           var marker = new google.maps.Marker({
               position : latLng,
               title : 'lokasi',
               map : map,
               streetViewControl: false,
               draggable : true,
           });
           updateMarkerPosition(latLng);
           google.maps.event.addListener(marker, 'drag', function() {
               updateMarkerPosition(marker.getPosition());
           });
            }
            </script>
       <div class="col-md-12">
        <div class="panel panel-default">
        <div class="panel-body">
        <div class="col-md-6">
         <form class="form-horizontal" method="POST" action="">
          <div class="form-group">
           <div class="col-md-12">
            <input type="text" placeholder="Latitude" name="latitude" id="latitude" class="form-control">
           </div>
          </div>
          <div class="form-group">
           <div class="col-md-12">
            <input type="text" placeholder="Longitude" name="longitude" id="longitude" class="form-control">
           </div>
          </div>
          <div class="form-group">
           <div class="col-md-12">
           <textarea class="form-control" name="keterangan" rows="3"></textarea>
           </div>
         </div>
          <div class="form-group">
           <div class="col-md-12">
            <select class="form-control" name="kategori">
             <option>ATM</option>
             <option>BANK</option>
             <option>SPBU</option>
            </select>
           </div>
          </div>
          <input type="submit" class="btn btn-success" name="simpan" value="SIMPAN">
          <a href="index.php?page=kelola" class="btn btn-warning">BATAL</a>
         </form>
         </div>
         <div class="col-md-6">
          <div id="maps" style="width:100%;height:300px"></div>
         </div>
        </div>
        </div>
       </div>
        <?php
       }
       else if ($_GET['page'] == 'kelola' && isset($_GET['aksi']) == 'edit' && !empty($_GET['data'])) {
       $read = $konfigurasi->tampilBerdasarkanData('tabel_data','id',$_GET['data']);
       $result = $read->fetch();
       if (isset($_POST['ubah'])) {
        try {
         $update = $konfigurasi->ubah('tabel_data' , $_POST['latitude'],$_POST['longitude'],$_POST['keterangan'],$_POST['kategori'],'id',$_GET['data']);
         if ($update) {
          echo "<script>alert('Data Lokasi Berhasil Diubah');window.location.href = 'index.php?page=kelola'</script>";
         }
        }
        catch (PDOException $e) {
         echo $e->getMessage();
        }
       }
        ?>
    <script type="text/javascript">
           function updateMarkerPosition(latLng) {
                document.getElementById('latitude').value = [latLng.lat()]
                document.getElementById('longitude').value = [latLng.lng()]
            }
            function initMap(){
           var map = new google.maps.Map(document.getElementById('maps'), {
               zoom: 14,
               center: new google.maps.LatLng(<?php echo $result['latitude'];?>, <?php echo $result['longitude']; ?>),
               mapTypeId: google.maps.MapTypeId.ROADMAP,
               mapTypeControl: false,
              zoomControl: true,
             scaleControl: false,
             streetViewControl: false,
             rotateControl: false,
             fullscreenControl: false
           });
           var latLng = new google.maps.LatLng(<?php echo $result['latitude'];?>, <?php echo $result['longitude']; ?>);
           var marker = new google.maps.Marker({
               position : latLng,
               title : 'lokasi',
               map : map,
               streetViewControl: false,
               draggable : true,
           });
           updateMarkerPosition(latLng);
           google.maps.event.addListener(marker, 'drag', function() {
               updateMarkerPosition(marker.getPosition());
           });
            }
            </script>
         <div class="col-md-12">
          <div class="panel panel-default">
          <div class="panel-body">
          <div class="col-md-6">
           <form class="form-horizontal" method="POST" action="">
            <div class="form-group">
             <div class="col-md-12">
              <input type="text" placeholder="Latitude" name="latitude" id="latitude" class="form-control" value="<?php echo $result['latitude']; ?>">
             </div>
            </div>
            <div class="form-group">
             <div class="col-md-12">
              <input type="text" placeholder="Longitude" name="longitude" id="longitude" class="form-control" value="<?php echo $result['longitude']; ?>">
             </div>
            </div>
            <div class="form-group">
             <div class="col-md-12">
              <textarea class="form-control" name="keterangan" rows="3"><?php echo $result['keterangan']; ?></textarea>
             </div>
            </div>
            <div class="form-group">
             <div class="col-md-12">
              <select class="form-control" name="kategori">
              <?php
              if ($result['kategori'] == "ATM") {
               echo "
               <option selected>ATM</option>
               <option>BANK</option>
               <option>SPBU</option>
               ";
              }
              else if ($result['kategori'] == "BANK") {
               echo "
                <option>ATM</option>
                <option selected>BANK</option>
                <option>SPBU</option>
              ";
              }
              else {
               echo "
                <option>ATM</option>
                <option>BANK</option>
                <option selected>SPBU</option>";
             }
              ?>
              </select>
             </div>
            </div>
            <input type="submit" class="btn btn-success" name="ubah" value="UBAH">
            <a href="index.php?page=kelola" class="btn btn-warning">BATAL</a>
           </form>
           </div>
           <div class="col-md-6">
            <div id="maps" style="width:100%;height:300px"></div>
           </div>
           </div>
         </div>
        </div>
          <?php
         }
        ?>
         <table id="table" class="table table-responsive table-bordered table-striped">
          <thead>
           <th width="5%">No</th>
           <th width="15%">Latitude</th>
           <th width="15%">Longitude</th>
           <th width="10%">Kategori</th>
           <th>Keterangan</th>
           <th width="5%">Ubah</th>
           <th width="5%">Hapus</th>
          </thead>
              <tbody>
              <?php
              $read = $konfigurasi->tampil('tabel_data','id');
              $no = 1;
              while ($result = $read->fetch()) {
                ?>
                &;nbsp <tr>
                    <td><?php echo $no++; ?></td>
                    <td><?php  echo $result['latitude'];?></td>
                    <td><?php  echo $result['longitude'];?></td>
                    <td><?php  echo $result['kategori'];?></td>
                    <td><?php  echo $result['keterangan'];?></td>
                    <td><a href="index.php?page=kelola&aksi=edit&data=<?php echo $result['id']; ?>" class="btn btn-info"><i class='fa fa-edit'></i></a></td>
                &nbsp        <td><a href="index.php?page=kelola&hapus=true&data=<?php echo $result['id']; ?>" class="btn btn-danger"><i class='fa fa-remove'></i></a></td>
                  </tr>
                    <?php
                  }
                ?>
              </tbody>
            </table>
          </div>
    </div>

    Hasil
    Adapun hasil dari aplikasi ini seperti dibawah ini atau anda dapat akses pada laman berikut >> Demo <<

    Terimakasih sudah berkesempatan untuk menimba ilmu dari blog JSC, semoga ilmu yang di share dapat bermanfaat. Jika ada pertanyaan mengenai ilmu yang terkait ataupun tidak, mari kita berdiskusi di dalam kolom komentar ini.

    Keep Learning and Keep Sharing

    1. ask : map icon tidak muncul kenapa min ? saya udah rename icon sesuai kategorinya . png tpi tetep tidak muncul
      mohon pencerahannya. Terima kasih sembelumnya

      BalasHapus
      Balasan
      1. bisa di akibatkan url dr pemanggilan iconnya, coba inspek elemen di browsermu. cek apakah ada script yang error. :D

        Hapus
      2. mungkin maksudnya marker (penanda) pada peta tidak muncul gan, ane juga ngalami hal yang sama, kira2 giman gan padahal udah add lat long sesuai.

        Hapus
      3. sama, kemungkinan ada beberapa karakter yang terketik karena kesalahan ketik.Sebenernya solusi terampuh untuk mengenali eror menggunakan console di inspek elemen pada browser.

        Hapus
    2. Ups! Ada sesuatu yang salah.
      Laman ini tidak memuat Google Maps dengan benar. Lihat konsol JavaScript untuk mengetahui detail teknisnya.

      muncul keterangan seperti itu, apakah penyebabnya yah mas? mohon terang. terimaksih

      BalasHapus
      Balasan
      1. coba di cek lagi masalah API Key agan, kali aja ada yang salah. :-d

        Hapus
    3. sudah di cek gan, sudah sesuai kok tapi masih belum nampil gimana yah gan?

      BalasHapus
      Balasan
      1. sudah coba lihat Console menggunakan inspek elemen di browser? untuk lihat errornya yang terjadi.

        Hapus
    4. belum bisa juga mas, padahal kalau pakai api key dimasukin di tutorial ini http://www.java-sc.com/2016/01/pendahuluan-1-membuat-maps-dengan-google-maps.html bisa nampil petanya?

      BalasHapus
      Balasan
      1. ada indikasi pemanggilan function initMap() di elemen html yang load map. Pastikan juga <script async defer src="https://maps.googleapis.com/maps/api/js?key=ISI DENGAN API KEY ANDA&callback=initMap"> .. kalau tidak bisa coba di upload kode ke pastebin dan kirim kesini linknya.

        Hapus
    5. saya cek lagi sudah bisa dengan sendirinya gan, makasih gan :)

      BalasHapus
    6. tidak ada pesan error gan. hanya saja peta tidak bisa memanggil database untuk di tampilkan.

      BalasHapus
    7. Maaf Gan mau nanya

      Pertama2 terimakasih ats tutorialnya. Semua berjalan lancar. Termasuk cluster marker yang saya tambahkan sendiri. Hanay saja saya ada kendala untuk menambah stroke color (list warna) untuk setiap marker yang ada. Saya mau stiap marker yang masuk kategori tertentu diberi list warna yang berbeda agar gampang diketahuinya. kalau disini saya maunya per koordinator. misalnya marker dalam koordiantor A list warnanya biru. Saya sudah coba berkali tetapi blum nemu code yg benar. apakah bisa icon nya ditambah dengan If-else atau switch case. seperti kode dibawah ini :

      var icon = 'icons/'+kategori+'.png' || {switch(koordinator)
      {
      case 'A': strokeColor: 'gold', strokeWeight: 5 ; break;
      case 'B' : strokeColor: 'red', strokeWeight: 5 ; break;
      case 'C' : strokeColor: 'green', strokeWeight: 5 ; break;
      case 'D' : strokeColor: 'blue', strokeWeight: 5 ;
      }
      };

      atau seperti apa yang benernya, karena sy coba dengan code spt diatas tetep ga bisa.

      Terima kasih Gan atas bantuan dan pencerahannya....

      BalasHapus
      Balasan
      1. situ pakai icon, kenapa harus di beri stroke, tapi kalau tidak boleh pakai ini.
        var kategori = markers[i].getAttribute("e");
        var fillcolor , strokecolor;
        if (kategori == 'ATM') {
        fillcolor = "#4286f4";
        strokecolor = "#f46141";
        }else if (kategori == 'BANK'){
        fillcolor = "#f4e842";
        strokecolor = "#31f9df"
        }else {
        fillcolor = "#f441ca";
        strokecolor = "#50543b";
        }
        var icon = {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: fillcolor,
        fillOpacity: 1,
        strokeColor: strokecolor,
        strokeWeight: 2,
        scale: 1,
        };

        Hapus
    8. ane pakai icon berbeda2 gan.. untuk ATM icon beda, restoran beda lagi iconnya. hanya saja karena atm, restoran, bank dll tiap daerah ada koordinatornya maka untuk mempermudah dikasi stroke color sebagai pengenal. Misalnya kalau bank, atm, restoran dll dengan stroke color biru maka koordinatornya A. Begitu gan maksudnya.
      Uda ane coba gan, kl pake if (kategori == 'ATM') maka fill color dan stroke nya mau muncul dgn warna berbeda sesuai kategori. tetapi jika ane ganti if (koordinator == 'A') munculnya dgn fill color dan strokenya sama semua. apa memang gabisa ya gan kl icon kita buat berdasarkan kategori tetapi stroke colornya dibuat berdasarkan koordinator.
      ini code saya gan
      for (var i = 0; i < markers.length; i++)
      {
      var latitude = parseFloat(markers[i].getAttribute("b"));
      var longitude = parseFloat(markers[i].getAttribute("c"));
      var keterangan = markers[i].getAttribute("d");
      var kategori = markers[i].getAttribute("e");
      var sistem = markers[i].getAttribute("f");
      var koordinator = markers[i].getAttribute("g");
      var fillcolor , strokecolor;
      if (koordinator == 'A') {
      fillcolor = "#4286f4";
      strokecolor = "#f46141";
      }else if (kategori == 'BANK'){
      fillcolor = "#f4e842";
      strokecolor = "#31f9df"
      }else {
      fillcolor = "#f441ca";
      strokecolor = "#50543b";
      }
      var icon = {path: ''icons/'+kategori+'.png',
      fillColor: fillcolor,
      fillOpacity: 1,
      strokeColor: strokecolor,
      strokeWeight: 2,
      scale: 1,
      };

      Btw, terimakasih banyak atas bantuannya Gan :)

      BalasHapus
      Balasan
      1. bisa gan, kondisi if else nya harus koordinator semua, selain itu koordinator memang ada didatabase dan datanya dapat di panggil.

        Hapus
    9. iya gan itu salah copy yg if else nya...:) . Uda ane coba gan..hanya saja kl pake path yg svg kluar stroke colornya. tetapi kl pake icon tersendiri yg ana buat.. stroke colornya ga kelaur gan..yg keluarnya hanya iconnya doang. kenapa ya gan..apa icon memang ga bisa pake stroke color ya...

      BalasHapus
      Balasan
      1. ia sayan juga blm nemu yang image tipe png, tapi boleh di coba convert ke svg kalau memang work. lagian svg load gambarnya lebih ringan.

        Hapus
    10. ane udah nyoba gan..tetep ga mau kl iconnya diubah ke .svg tapi kl pake path svg bisa muncul strokenya. kalau pake css bisa ga ya gan? misalnya kalau kategori A di css iconnya pake background color merah. mohon pencerahannya gan :) kalau memang bisa pake css contohnya seperti apa gan.. trims bgt atas bantuannya

      BalasHapus
      Balasan
      1. Saya dah coba juga mas, sepertinya untuk image png tidak bisa menggunakan stroke css.

        Hapus
    11. Kalo menambahkan infowindow dalam marker? Yang berisi database mysql berupa tabel dinamis.
      Mohon bantuannya master...

      BalasHapus
      Balasan
      1. bisa mas,untuk konten silahkan disesuaikan aja, tapi untuk paggingnya saya belum coba.

        Hapus
    12. maaf mas hery jika masih tidak keberatan menjawab karena saya mengalami permasalahan klasik markernya tidak muncul.
      ketika cek inspek element saya cuma mendapati url fontawesome yg mati, analisa lain saya mengira barangkali versi api tidak sesuai,
      jika ada kemungkinan lain mohon disampaikan, soalnya saya cuma mampu salin mentah kodinganya, hhe
      terimakasih

      BalasHapus
      Balasan
      1. (y) selalu coba dan usahakan kalau anda bermodal copy paste saja, periksa setiap baris kode program apakah ada yang keliru. Copy paste source code berlaku kalau anda sudah paham dengan penulisan/ aturan bahasa pemrograman yang terkait, kalau belum paham lebh baik ketik dari awal (sekalia untuk belajar)

        kalau kasusnya marker tidak muncul, coba di cek pada file koordinat.php, coba di jalankan localhost/direktori/koordinat.php. Jika menampilkan data berarti tidak ada masalah pada database. Jika masih tidak bisa, coba lihat pada API KEY atau file javascript jquery.1.x yang sedang di pakai. :)

        Hapus
      2. sudah mas Hery, betul ada kekeliruan penulisan.
        ikonya sudah muncul setelah dicek lagi, terimakasih mas untuk tutorial dan jawaban langsungnya hihi (li)

        Hapus
      3. klarifikasi, nama saya bukan hery. :)

        Hapus
      4. ternyata salah paham saya mas, mohon dimaklumi mas Hady. (li)
        ditunggu tutorial selanjutnya, direction mungkin, hhe. (c)

        Hapus
      5. kodingnya sudah ada gan, tinggal publish aja hehe

        Hapus
      6. wahhh siap, kabar gembira ini :-d

        Hapus
    13. maaf gan saya sudah coba tetapi gambar suka hilang dan muncul
      Ups! Ada sesuatu yang salah.
      Laman ini tidak memuat Google Maps dengan benar. Lihat konsol JavaScript untuk mengetahui detail teknisnya.

      mohon pencerahaannya

      BalasHapus
      Balasan
      1. Cek API KEY yang dipakai mas, dan cek apakah javascript dirender pada element html untuk penempatan maps nya.

        Hapus
    14. ask: sebelumnya trima kasih tutorialnya mas!!!
      saya mau nanya, knapa ya di mapping website sya beberapa tempat yang sudah dimasukkan koordinatnya ke database, tidak muncul iconnya???
      cuma beberapa yang muncul/tidak semua!!!

      BalasHapus
      Balasan
      1. Ada kemungkinan kalau kamu tidak punya file icon.png berdasarkan kategori nya, coba cek folder assets atau image.

        Hapus
    15. bang saya coba tapi gak nampil marker nya, saya atur titik fokus nya ke kota tembilahan pun tidak muncul marker nya. ada solusi bg?

      kalau misalnya di tambah folde image, kasih icon.png gmana

      BalasHapus
      Balasan
      1. Saya ada buat tutorial sebelum ini, coba di pelajari dulu jika blm paham ,buka saja menu google maps gan.

        Hapus
    16. dari marker yang di tampilkan di peta itu, bisa di buat direction nya gk mas? misalnay kita klik satu marker trus kita di arahkan ke koordinat tersebut.

      BalasHapus
      Balasan
      1. Bisa mas, maaf, cuma saya blm sempat buat tutorial nya (lagi sibuk). (li)

        Hapus
    17. Assalamualaikum bang saya request dong bikin maps, markernya diambil dari db sekalian di cluster, saya lagi iseng buat itu pake php encode json, tapi yg kebaca di console selalu string :( makasih banyak mas

      BalasHapus
      Balasan
      1. Walaikumsalam. Bisa mas nanti saya buatkan, saya noted dulu ya. (li)

        Hapus
      2. Abang, alhamdulillah saya udah bisa bikinnya ngikutin tutor dari abang, tapi saya bingung pas mau nambahin marker clusteringnya doang tuh udah ngikutin dari google.dev tapi gabisa bisa, bimbingannya bang :( makasih

        Hapus
    18. kk kog ini sama ya markernya gak mau muncul padahal peta database udah bisa smua udah tampil, tpi markernya gak keluar...
      dmn lgi kk kira2 masalahnya. maaf newbie bgt.
      mohon balasnya. thx (li)

      BalasHapus
      Balasan
      1. Sama seperti sebelumnya, untuk mengindikasi error coba cuka console pada browser, error apa yang dintampilkan.

        Kalau indikasi pertama karena API KEY, kedua jquery, ketiga parse data dari database.

        Hapus
    19. bang kok mapnya gak nimbul yaa

      BalasHapus
      Balasan
      1. Sama seperti sebelumnya, untuk mengindikasi error coba cuka console pada browser, error apa yang dintampilkan.

        Kalau indikasi pertama karena API KEY, kedua jquery, ketiga parse data dari database.

        Hapus
    20. Gan,
      map icon tidak muncul kenapa ?
      mohon pencerahannya. Terima kasih sembelumnya

      pesan error nya :
      src="https://use.fontawesome.com/2642b88c56.js"

      BalasHapus
      Balasan
      1. Jika pesan di console seperti itu, nah coba kamu download atau subscribe fontawsome nya di fontawesome.io

        Hapus
    21. bang ada satu kendala lagi ni di sekarang icon marker pada petanya yang gak nimbul di (home.php) apakah icon tersebut kita sendiri yang menanbabhkan atau sudah teersedia didalam komponen yang ada di download tadi,, tolong pencerahaanya bang ,Makasih sebelumnya

      BalasHapus
      Balasan
      1. Sudah saya sertakan di dalam komponen, akan tetapi nama file berdasarkan dengan kategori pada database. kalau kamu menggunakan penamaan lain, silahkan di rename file icon yang ada di folder asset nya.

        Hapus
    22. Loading failed with source
      https://use.fontawesome.com/2642b88c56.js
      index.php:165
      Source map error: request failed with status 404
      Resource URL: http://localhost/map/assets/bootstrap.css
      Source Map URL: bootstrap.css.map

      sama seperti diatas, masalahnya marker gak muncul.
      malah ada tambahan masalah pada bootstrapnya..mohon bantuannya mas, terima kasih

      BalasHapus
      Balasan
      1. file https://use.fontawesome.com/2642b88c56.js , agan bisa cek di fontawesome.com. Kalau statusnya 404 berarti harus cek lagi apakah file terpanggil apa tidak/ file tersedia apa tidak. Kalau sudah terpecahkan mohon komentar di sini agar tidak ada kejadian yang sama. Terimakasih.

        Hapus
    23. bang bisa gak ditambahi untuk mendeteksi titik lokasi kita berada juga

      BalasHapus
    24. min kalo error nya seperti ini, gmn ya fix nya?

      Fatal error: Uncaught Error: Call to a member function prepare() on null in D:\xampp\htdocs\Eterna\conf.php:26 Stack trace: #0 D:\xampp\htdocs\Eterna\input.php(222): konfigurasi->tampil('tabel_data', 'id') #1 D:\xampp\htdocs\Eterna\index.php(16): include('D:\\xampp\\htdocs...') #2 {main} thrown in D:\xampp\htdocs\Eterna\conf.php on line 26

      BalasHapus
    25. bang ada caranya gak biar info windownya nimbul foto juga ketika markernya dklik ngambil dari database juga gambarnya mohon panduannya

      BalasHapus
      Balasan
      1. sama saja kaya di atas, ngambil foto di sesuaikan saja sama folder tempat upload fotonya. kalau pakai ajax biasanya directorynya yang di pas-pas kan.

        Hapus
    26. makasih tutorialnya, hanya ini markernya elum muncul ya, bisa dibantu detilnya mas, soalnya newbie, hehehe

      BalasHapus
      Balasan
      1. coba cek, kesalahannya ada yang sama gak dari komentar yang ada?

        Hapus