Membuat Peta Mengunakan Google Maps Dengan PHP dan MySql (1)

Example blog post alt

GIS | 2018-11-26

Pada tutorial kali ini kita akan mencoba menampilkan data lokasi yang ada dalam database kedalam peta Google Maps. Hal yang perlu di persiapkan adalah XAMPP dalam hal ini XAMPP 1.7.3 kemudian aktifkan apache server dan MySql, seperti gambar dibawah ini, kemudian buatlah folder di dalam htdocs dengan nama gis.

Data Lokasi

Buat database dengan nama gis dan tabel markers :

Koneksi Ke Database

Buat file koneksi.php dengan isi script nya adalah :

<?php
$server="localhost";
$username="root";
$password="";
$konek=mysql_connect($server,$username,$password);
 
if(!$konek){
echo "Koneksi Gagal"; 
}
$db=mysql_select_db("gis"); 
if(!$db){ 
echo "database Gagal"; 
}
?>

 

Menampilkan Data Dalam Database Kedalam Google Maps

Buat file index.php dengan isi script di bawah ini :

<?php
  include "koneksi.php";
?>
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map-canvas {
        width: 100%;
        height: 500px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    
	<script>
    var marker;
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }     
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var infoWindow = new google.maps.InfoWindow;      
        var bounds = new google.maps.LatLngBounds();
 
		
 
        function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }
 
          function addMarker(lat, lng, info) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                map: map,
                position: pt
            });       
            map.fitBounds(bounds);
            bindInfoWindow(marker, map, infoWindow, info);
          }
 
          <?php
            $query = mysql_query("select * from markers");
          while ($data = mysql_fetch_array($query)) {
            $lat = $data['lat'];
            $lon = $data['lng'];
            $nama = $data['name'];
			$alamat = $data['address'];
            echo ("addMarker($lat, $lon, '<b>$nama<br>$alamat</b>');\n");                        
          }
          ?>
        }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Jalan kan script di atas di browser dengan mengetikan http://localhost/gis maka akan menghasilkan tampilan seperti di bawah ini

Selamat Mencoba !!

 

Download Aplikasi