188 views

Cara Membuat Marker Cluster pada peta Google API di php mysql

Posted on 188 views

Cara Membuat Marker Cluster pada peta Google API – pada kesempatan kali ini penasihatguru akan membagikan tutorial Membuat Marker Cluster pada peta Google API di php.

Marker menunjukkan lokasi tunggal pada peta. Anda bisa menyesuaikan marker dengan mengubah warna default,(Developer Google). jadi marker adalah gambaran batas wilayah pada peta dengan membuat marker kita dapat memberi icon dan warna pada peta sehingga mempermudahkan dalam petunjuk batas wilayah. peta berikut merupakan peta dengan batas wilayah kecamatan pelaihari.

anda bisa melihat contoh marker pada gambar di bawah ini

Cara Membuat Marker Cluster pada peta Google API

Langsung saja Cara Membuat Marker Cluster pada peta Google API

1.Buat Database Dengan nama db_gis kemudian buat tabel dengan nama tb_lokasi. kemudian variabel nya seperti gambar di bawah.

Langsung saja Cara Membuat Marker Cluster pada peta Google API

2. Kemudian buat index.php dan masukan source code di bawah ini.

php
$host = 'localhost';
$user = 'root';
$pass = '';
$db  = 'db_gis';
mysql_connect($host,$user,$pass) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());
?>

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Sistem Informasi Geografis Tempat Ibadah</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: {lat: -3.7990165, lng: 114.779605}
        });
          var ctaLayer = new google.maps.KmlLayer({
          url: 'https://www.dropbox.com/s/6rmopz2nn2vv924/pelaihari.kml?dl=1',
          zoom:18,
          map: map
        });
        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });
        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
         
            php include("koneksi.php"); ?>
            php
           
            $sql = mysql_query("SELECT * from tb_lokasi"); // query memilih entri nik pada database
            if(mysql_num_rows($sql) == 0){
                header("Location: index.php");
            }else{
                while($row = mysql_fetch_assoc($sql)){
                   
                    echo'
                       {lat: '.$row['garis_lintang'].', lng: '.$row['garis_bujur'].'},
                   ';
                }
            }
           
            ?>
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_WykUgS8xTkHlZ9Ll7fpIfiuq39_1fL8&callback=initMap">
    </script>
  </body>
</html>

Ganti tulisan berwarna merah dengan google API anda jika belum mengetahui cara membuat google API baca Cara membuat key Google API
Jika sudah jalankan aplikasi di browser anda maka tampilannya akan seperti gambar di bawah.

Langsung saja Cara Membuat Marker Cluster pada peta Google API

Nah jika teman-teman ingin download file Marker Cluster pada peta Google API di php silahkan download Disini

Download Disini

Suka dengan artikel ini silahkan bagikan ke teman teman anda.

itulah Cara Membuat Marker Cluster pada peta Google API semoga bermanfaat.

Gravatar Image
Syaiful Hadi : Belajar bukan untuk hanya sekedar pintar,Tetapi belajar untuk berbagi dan mengajarkan

One thought on “Cara Membuat Marker Cluster pada peta Google API di php mysql

Leave a Reply

Your email address will not be published. Required fields are marked *