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).
?
1
2
3
4
5
6
7
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.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?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.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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.
?
1
2
3
4
5
6
7
8
><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.
?
1
2
3
4
5
6
7
8
9
10
11
12
<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.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<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.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<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   <span class="Apple-tab-span" style="white-space: pre;">     </span><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 <<

Related Posts


Home Google Maps Cara Membuat Aplikasi Google Maps Dengan PHP dan MySQL

Author

Hady Eka Saputra

58 Komentar

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

Emoticon

  1. danangASdanajoo29 Mei 2017 pukul 06.29

    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. Hady Eka Saputra29 Mei 2017 pukul 07.48

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

      Hapus
    2. Unknown11 Juni 2017 pukul 14.15

      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. Hady Eka Saputra11 Juni 2017 pukul 21.12

      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. Unknown8 Juni 2017 pukul 15.07

    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. Hady Eka Saputra8 Juni 2017 pukul 22.48

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

      Hapus
  3. Unknown10 Juni 2017 pukul 14.10

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

    BalasHapus
    Balasan
    1. Hady Eka Saputra10 Juni 2017 pukul 17.13

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

      Hapus
  4. Unknown10 Juni 2017 pukul 14.39

    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. Hady Eka Saputra10 Juni 2017 pukul 21.05

      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. Unknown11 Juni 2017 pukul 13.48

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

    BalasHapus
  6. Unknown12 Juni 2017 pukul 13.06

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

    BalasHapus
  7. IT's My Life12 Juli 2017 pukul 16.33

    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. Hady Eka Saputra12 Juli 2017 pukul 21.11

      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. IT's My Life13 Juli 2017 pukul 14.01

    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. Hady Eka Saputra13 Juli 2017 pukul 21.22

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

      Hapus
  9. IT's My Life14 Juli 2017 pukul 15.09

    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. Hady Eka Saputra15 Juli 2017 pukul 07.41

      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. IT's My Life25 Juli 2017 pukul 18.37

    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. Hady Eka Saputra29 Juli 2017 pukul 09.22

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

      Hapus
  11. Unknown28 Juli 2017 pukul 20.13

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

    BalasHapus
    Balasan
    1. Hady Eka Saputra29 Juli 2017 pukul 09.23

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

      Hapus
  12. ELECTRA ART1 Agustus 2017 pukul 11.28

    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. Hady Eka Saputra1 Agustus 2017 pukul 19.54

      (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. ELECTRA ART2 Agustus 2017 pukul 08.57

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

      Hapus
    3. Hady Eka Saputra2 Agustus 2017 pukul 09.59

      klarifikasi, nama saya bukan hery. :)

      Hapus
    4. ELECTRA ART3 Agustus 2017 pukul 11.11

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

      Hapus
    5. Hady Eka Saputra3 Agustus 2017 pukul 13.53

      kodingnya sudah ada gan, tinggal publish aja hehe

      Hapus
    6. ELECTRA ART3 Agustus 2017 pukul 23.31

      wahhh siap, kabar gembira ini :-d

      Hapus
  13. aep1 Agustus 2017 pukul 14.37

    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. Hady Eka Saputra1 Agustus 2017 pukul 19.55

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

      Hapus
  14. Luffy12 Oktober 2017 pukul 15.10

    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. Hady Eka Saputra13 Oktober 2017 pukul 19.47

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

      Hapus
  15. Optima Ponsel18 Oktober 2017 pukul 22.19

    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. Hady Eka Saputra19 Oktober 2017 pukul 07.00

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

      Hapus
  16. Optima Ponsel24 Oktober 2017 pukul 20.21

    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. Hady Eka Saputra26 Oktober 2017 pukul 00.01

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

      Hapus
  17. Khal1 November 2017 pukul 14.40

    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. Hady Eka Saputra2 November 2017 pukul 09.11

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

      Hapus
    2. Khal3 November 2017 pukul 13.51

      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. Unknown8 Desember 2017 pukul 10.34

    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. Hady Eka Saputra10 Desember 2017 pukul 10.41

      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. Unknown12 Desember 2017 pukul 19.15

    bang kok mapnya gak nimbul yaa

    BalasHapus
    Balasan
    1. Hady Eka Saputra13 Desember 2017 pukul 13.46

      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. Unknown13 Desember 2017 pukul 14.18

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

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

    BalasHapus
    Balasan
    1. Hady Eka Saputra14 Desember 2017 pukul 18.30

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

      Hapus
  21. Unknown14 Desember 2017 pukul 19.54

    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. Hady Eka Saputra14 Desember 2017 pukul 23.31

      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. devis22 April 2018 pukul 13.32

    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. Hady Eka Saputra23 April 2018 pukul 18.03

      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. Unknown10 Juli 2018 pukul 18.13

    bang bisa gak ditambahi untuk mendeteksi titik lokasi kita berada juga

    BalasHapus
  24. Unknown17 Juli 2018 pukul 15.01

    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. Unknown3 Agustus 2018 pukul 22.19

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

    BalasHapus
    Balasan
    1. Hady Eka Saputra4 Agustus 2018 pukul 17.48

      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. only nobody25 Agustus 2018 pukul 14.34

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

    BalasHapus
    Balasan
    1. Hady Eka Saputra26 Agustus 2018 pukul 16.12

      coba cek, kesalahannya ada yang sama gak dari komentar yang ada?

      Hapus