Menampilkan Markers Google Maps API Dengan PHP Dan MySQL

Menampilkan Markers Google Maps API dengan PHP dan
MySQL
Posted Jul 2nd 2015, 20:31
42
Hai-hai teman-teman jagocoding. Kali ini sedikit lebih advance, tapi tetap masih pada topik
tentang Google Maps! Kali ini masih menampilkan markers tapi kali ini data markers kita ambil
dari database sendiri.
Pada tutorial kali ini kita akan sedikit menggunakan PHP dan juga MySQL, semoga teman-
teman sudah kenal dengan mereka.
Preparation
Persiapannya untuk tutorial kali ini, berbeda dengan sebelumnya kita perlu text-editor saja, kali
ini kita tambah, karena kita butuh server bohongan alias XAMPP Server, atau LAMPP jika
kalian menggunakan linux, atau sejenisnya. yang jelas kita butuh Apache Server dan juga
MySQL Server.
Membuat Tabel Lokasi

Ya, konsepnya sama seperti pada tutorial menampilkan multiple markers, dimana sebelumnya
kita menggunakan array. Untuk kasus kali ini kita menggunakan tabel sql.
Pertama buat database, sebut saja db_test dan juga buat tabel, terserah mau pake console atau
phpmyadmin (saya sarankan sih phpmyadmin, lebih mudah) :D
Kita buat tabel dengan nama tbl_lokasi dengan berisi 4 field yaitu id_lokasi, nama_lokasi, lat,
dan lng.
Yang perlu diperhatikan, lat dan lang harus dengan type float(10,6).
Isi Tabel Lokasi

Ya karena susah mikir apa data lokasi kali ini, dan lebih mudah dan lebih cepat kalau kita
gunakan saja data di tutorial sebelumnya yaitu data gunung-gunung di jawa. hahaha
Ini yang perlu sql codenya:
INSERT INTO `db_test`.`tbl_lokasi` (`id_lokasi`, `nama_lokasi`, `lat`,

`lng`) VALUES (NULL, 'Taman Nasional Gunung Gede Pangrango', '-
6.777797700000000000', '106.948689100000020000'), (NULL, 'Gunung
Papandayan', '-7.319999999999999000', '107.730000000000020000'), (NULL,
'Gunung Cikuray', '-7.3225', '107.86000000000001'), (NULL, 'Gunung Bromo',
1'-7.942493600000000000', '112.953012199999990000'), (NULL, 'Gunung Semeru',
'-8.1077172', '112.92240749999996'), (NULL, 'Gunung Merapi', '-
7.540717500000000000', '110.445724100000000000'), (NULL, 'Gunung Merbabu',
'-7.455000000000001000', '110.440000000000050000'), (NULL, 'Gunung Prau', '-
7.1869444', '109.92277779999995');
Buat Koneksi ke Database

Pertama, seperti biasanya dalam file php, perlu ada cek untuk koneksi dan memilih database.
Kalian bisa pilih ingin dalam satu file file lain. Saya prefer buat file lain. beri nama:
dbconfig.php.Sesuaikan dengan host, password dan user kalian ya.
1
2 <?php
$host = 'localhost';
3 $user = 'root';
4 $pass = '';
5 $db = 'db_test';
6 $koneksi = mysql_connect($host,$user,$pass);
7
8 if(!$koneksi){
9 die("Cannot connect to database.");
}
10
11 mysql_select_db($db);
12
13?>
14
Buat fungsi untuk menambahkan marker dan menampilkan

info windows
1
2 var infoWindow = new google.maps.InfoWindow;
3
4 function bindInfoWindow(marker, map, infoWindow, html) {
5 google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
6
infoWindow.open(map, marker);
7 });
8 }
9
10 function addMarker(lat, lng, info) {
11 var pt = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
12 map: map,
13 position: pt
14 });
15 bindInfoWindow(marker, map, infoWindow, info);
16 }
17
Kita buat dua fungsi ini, yaitu yang pertama adalah untuk menampilkan info windows, dimana
akan di bind atau di attach ke tiap markers. Fungsi kedua yaitu addMarker yaitu fungsi
menambahkan markers, pada akhir fungsi addMarker, memanggil fungsi bindInfoWindow,
sehingga tiap markers akan memiliki info window.
Menampilkan data markers ke maps.

1<?php
2 $query = mysql_query("select * from tbl_lokasi");
3 while ($data = mysql_fetch_array($query)) {
4 $lat = $data['lat'];
$lon = $data['lng'];
5 $nama = $data['nama_lokasi'];
6 echo ("addMarker($lat, $lon,
7'<b>$nama</b>');\n");
8 }
?>
9
Di script ini kita melakukan select untuk menampilkan data pada database, kemudian melakukan
looping sebanyak data, dan kemudian data tersebut dibuat array dan dimasukan kedalam markers
dengan menggunakan fungsi addMarker.
Source Code Lengkap

1 <?php
include "dbconfig.php";
2 ?>
3
4 <!DOCTYPE html>
5 <html>
6 <head>
<style>
7
#map-canvas {
8 width: 500px;
9 height: 500px;
10 }
11 </style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
12 <script>
13 var marker;
14 function initialize() {
15 var mapCanvas = document.getElementById('map-canvas');
16 var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
17 }
18 var map = new google.maps.Map(mapCanvas, mapOptions);
19 var infoWindow = new google.maps.InfoWindow;
20 var bounds = new google.maps.LatLngBounds();
21
22
function bindInfoWindow(marker, map, infoWindow, html) {
23 google.maps.event.addListener(marker, 'click', function() {
24 infoWindow.setContent(html);
25 infoWindow.open(map, marker);
26 });
27 }
28
function addMarker(lat, lng, info) {
29 var pt = new google.maps.LatLng(lat, lng);
30 bounds.extend(pt);
31 var marker = new google.maps.Marker({
32 map: map,
position: pt
33 });
34 map.fitBounds(bounds);
35 bindInfoWindow(marker, map, infoWindow, info);
36 }
37
<?php
38 $query = mysql_query("select * from tbl_lokasi");
39 while ($data = mysql_fetch_array($query)) {
40 $lat = $data['lat'];
41 $lon = $data['lng'];
42 $nama = $data['nama_lokasi'];
echo ("addMarker($lat, $lon,
43'<b>$nama</b>');\n");
44 }
45 ?>
46 }
google.maps.event.addDomListener(window, 'load', initialize);
47 </script>
48 </head>
49 <body>
50 <div id="map-canvas"></div>
51 </body>
</html>
52
53
54
55
56
57
58
59
60
61
Hasil akhirnya akan hampir sama dengan tutorial sebelumnya, karena memang data dan
tekniknya sebenarnya hampir sama. Disini cobalah kalian lebih mengeksplor lagi, seperti
menambahkan field deskripsi sehingga bisa ditampilkan di InfoWindow juga. Atau teknik
lainnya.
Perlu dicatat bahwa jika kalian mencari di google, mungkin ada cara berbeda seperti
menggunakan json dan cara lainnya. Jadi gunakan yang kalian lebih suka dan mengerti. Feel free
to ask me!
Sekian tutorial kali ini, terima kasih. semoga bermanfaat.
http://jagocoding.com/tutorial/890/Menampilkan_Markers_Google_Maps_API_dengan_PHP_dan_MyS
QL

Menampilkan Markers Google Maps API Dengan PHP Dan MySQL

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Menampilkan Markers Google Maps API Dengan PHP Dan MySQL

Diunggah oleh

Hak Cipta:

Format Tersedia

Menampilkan Markers Google Maps API dengan PHP dan

teman sudah kenal dengan mereka.

Membuat Tabel Lokasi

Isi Tabel Lokasi

INSERT INTO `db_test`.`tbl_lokasi` (`id_lokasi`, `nama_lokasi`, `lat`,

Buat Koneksi ke Database

Buat fungsi untuk menambahkan marker dan menampilkan

Menampilkan data markers ke maps.

Source Code Lengkap

Anda mungkin juga menyukai