Menampilkan Peta di Google Map dari database MySQL dan PHP

selamat pagi teman-teman pagi ini agak sedikit kesal karena dapat sms dari salah satu client yang udah lama dan baru di sms, ada revisi tapi minta buat uang kopi aja susah amat yak ? oke langsung aja kita ke tutorial nya, tutorial ini saya buat dari bootstrap, oke intinya dari program ini adalah menampilkan data menara telekomunikasi yang ada di suatu daerah misal lampung, nah project ini ada menampilkan di peta, dan data itu berasal dari database

oke langsung ke intinya ya, berikut manggil peta javascriptnya

  •  <!DOCTYPE html>
    <html lang="en">
    <head>
    <script type="text/javascript" src="jquery.min.js"></script>
     <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
     <script type="text/javascript">
     function initialize() {
     var mapDiv = document.getElementById('map-canvas');
     var map = new google.maps.Map(mapDiv, {
     center: new google.maps.LatLng(-5.434,105.270),
    
     zoom: 13,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     });
     }
     google.maps.event.addDomListener(window, 'load', initialize);
     </script>
     <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
     <link href="css/bootstrap-responsive.css" rel="stylesheet">
     <meta charset="utf-8">
     <title>Sistem Informasi GIS</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
    
     <!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
     <!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
     <!--script src="js/less-1.3.3.min.js"></script-->
     <!--append ‘#!watch’ to the browser URL, then refresh the page. -->
    
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
    
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
     <script src="js/html5shiv.js"></script>
     <![endif]-->
    
     <!-- Fav and touch icons -->
     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
     <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
     <link rel="shortcut icon" href="img/favicon.png">
    
     <script type="text/javascript" src="js/jquery.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/scripts.js"></script>
    </head>
    
    <body>
    <div class="container">
     <div class="row clearfix">
     <div class="col-md-12 column">
     <nav class="navbar navbar-default" role="navigation">
    
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <?php include "config/menu.php"; ?>
    
     <ul class="nav navbar-nav navbar-right">
     <?php include "config/menuadmin.php"; ?>
    
     </ul>
     </div>
    
     </nav>
    
     </div>
     </div>
     <br>
     <br>
     <div class="row clearfix">
     <div class="col-md-12 column">
     <h1><center>Peta Bandar Lampung</center></h1>
     <br>
    
     <div id="map-canvas" style="width: 1150px; height: 500px">
    
     </div>
    
     </div>
     </div>
     </div>
     </div>
    </div>
    
    </body>
    </html>
    

lihat baris yang atas javascript di bawah ini fungsinya adalah memanggil google map, karena untuk daerah lampung jadi harus cari titiknya dahulu, karena titik lampung -5.434,105.270

  •  <script type="text/javascript">
     function initialize() {
     var mapDiv = document.getElementById('map-canvas');
     var map = new google.maps.Map(mapDiv, {
     center: new google.maps.LatLng(-5.434,105.270),
    
     zoom: 13,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     });
     }
     google.maps.event.addDomListener(window, 'load', initialize);
     </script>

fungsi ini adalah menempatkan peta di div Map-canvas, coba perhatikan source yang di atas sekali

  •  var mapDiv = document.getElementById('map-canvas');

oke, masalh inputan ke database tidak akan saya bahas disini, saya anggap semua sudah bisa, sekarang cari manggil yang ada di dataabase dan tampilkan di dalam peta, ini saya panggil berdasarkan jenis menara yaitu menara indosat

  • <!DOCTYPE html>
    <html lang="en">
    <head>
    <script type="text/javascript" src="jquery.min.js"></script>
     <script type="text/javascript" src="script.js"></script>
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
     <script type="text/javascript">
    
     (function() {
     window.onload = function() {
    var map;
     var locations = [
     <?php
     //konfgurasi koneksi database
     mysql_connect('localhost','root','');
     mysql_select_db('jul');
    
     $sql_lokasi="SELECT *
     FROM `tmenaradetail` WHERE pemilik = 'XL'";
     $result=mysql_query($sql_lokasi);
     // ambil nama,lat dan lon dari table lokasi
     while($data=mysql_fetch_object($result)){
     ?>
     ['<?=$data->id_detail;?>', <?=$data->lat;?>, <?=$data->lng;?>],
     <?
     }
     ?> 
    
     ];
    
     //Parameter Google maps
     var options = {
     zoom: 12, //level zoom
     //posisi tengah peta
     center: new google.maps.LatLng(-5.390060,105.239380),
     mapTypeId: google.maps.MapTypeId.ROADMAP
     };
    
     // Buat peta di
     var map = new google.maps.Map(document.getElementById('peta'), options);
     // Tambahkan Marker 
    
     var infowindow = new google.maps.InfoWindow();
    
     var marker, i;
     /* kode untuk menampilkan banyak marker */
     for (i = 0; i < locations.length; i++) {
     marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], locations[i][2]),
     map: map,
     icon: 'img/shit.png'
     });
     /* menambahkan event clik untuk menampikan
     infowindows dengan isi sesuai denga
     marker yang di klik */
    
     google.maps.event.addListener(marker, 'click', (function(marker, i) {
     return function() {
     var id= locations[i][0];
    
     $.ajax({
     url : "get_info.php",
     data : "id=" +id ,
    
     success : function(data) {
     infowindow.setContent(data);
     infowindow.open(map, marker);
     }
     });
     }
     })(marker, i));
     }
    
     };
    })();
    
     </script>
     <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
     <link href="css/bootstrap-responsive.css" rel="stylesheet">
     <meta charset="utf-8">
     <title>Sistem Informasi GIS</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="">
     <meta name="author" content="">
    
     <!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
     <!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
     <!--script src="js/less-1.3.3.min.js"></script-->
     <!--append ‘#!watch’ to the browser URL, then refresh the page. -->
    
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
    
     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
     <script src="js/html5shiv.js"></script>
     <![endif]-->
    
     <!-- Fav and touch icons -->
     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
     <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
     <link rel="shortcut icon" href="img/favicon.png">
    
     <script type="text/javascript" src="js/jquery.min.js"></script>
     <script type="text/javascript" src="js/bootstrap.min.js"></script>
     <script type="text/javascript" src="js/scripts.js"></script>
    </head>
    
    <body>
    <div class="container">
     <div class="row clearfix">
     <div class="col-md-12 column">
     <nav class="navbar navbar-default" role="navigation">
    
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <?php include "config/menu.php"; ?>
    
     <ul class="nav navbar-nav navbar-right">
     <?php include "config/menuadmin.php"; ?>
     </ul>
     </div>
    
     </nav>
    
     </div>
     </div>
     <br>
     <br>
     <div class="row clearfix">
     <div class="col-md-12 column">
     <div id="peta" style="width: 1150px; height: 500px">
    
     </div>
    
     </div>
     </div>
     </div>
     </div>
    </div>
    
    </body>
    </html>
    

berikut gambar screen shot nya

Peta

peta

berikut filenya, silahkan di download disni, jika ada pertanyaa silahkan komen di bawah ini, untuk username dan pasword admin admin

 

 

 

 

  • JOJO

    mas, boleh minta databasenya buat belajar..

    • admin

      Databsenya ada di dalam Jojo, moga bermanfaat ya, Gbu :D

  • https://addons.mozilla.org/en-US/firefox/addon/pasar-kode-fast-toolbar PK

    wah kaka hebat…ajarin aku dong kak ?

    • admin

      Download saja gan, dan silahkan di pelajari, kalau ada yang selip silahkan kemari :D

      Thanks sudah berkunjung

  • freddy

    (y)

  • Husni’s Elemento

    mantab bro…

  • kartika

    punya saya masih ada yg error, jadi icon pin sama alamat dr database ga muncul dipetanya, itu kenapa yaaa

  • Thino Riwu

    bro kenapa marker pada petanya ngak muncul? mohon pencerahannya. tolong di balas ya.

    • freddy

      sudah di download blm, check confignya? maaf ini project lama, kalau versi codeigniter main ke blog ku satunya http://www.sidaurukfreddy.com

  • Her Mawan

    file databasenya gak ada gan?

  • Pulang Pundung

    maaf gan mau tanya, ini database nya tidak disertakan yah?

  • sholahuddin

    maaf gan linknya udh gak bisa di download / rusak