Cara Membuat Marker Cluster pada peta Google API

Cara Membuat Marker Cluster pada peta Google API

Cara Membuat Marker Cluster pada peta Google API

Bagaimana Cara membuat marker pada peta ?.

Pada pembahasan kali ini admin freakprogrammer akan membagikan cara membuat marker pada peta. tutorial yang akan admin berikan admin buat sesederhana mungkin agar mudah di pahami oleh pembaca sekalian, baiklah lagsung saja.

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.
Cara Membuat Marker Cluster pada peta Google API

1. Buat Database 

Buat Database Dengan nama db_gis kemudian buat tabel dengan nama tb_lokasi. kemudian variabel nya seperti gambar di bawah.
Cara Membuat Marker Cluster pada peta Google API

2. Buat koneksi.php

buat koneksi dengan source code berikut.
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());?>

3. Buat index.php

Kemudian masukan source code berikut.
  1. php
  2. $host = 'localhost';
  3. $user = 'root';
  4. $pass = '';
  5. $db  = 'db_gis';
  6. mysql_connect($host,$user,$pass) or die(mysql_error());
  7. mysql_select_db($db) or die(mysql_error());
  8. ?>

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5.     <meta charset="utf-8">
  6.     <title>Sistem Informasi Geografis Tempat Ibadah</title>
  7.     <style>
  8.       /* Always set the map height explicitly to define the size of the div
  9.        * element that contains the map. */
  10.       #map {
  11.         height: 100%;
  12.       }
  13.       /* Optional: Makes the sample page fill the window. */
  14.       html, body {
  15.         height: 100%;
  16.         margin: 0;
  17.         padding: 0;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div id="map"></div>
  23.     <script>
  24.       function initMap() {
  25.   var map = new google.maps.Map(document.getElementById('map'), {
  26.           zoom: 10,
  27.           center: {lat: -3.7990165, lng: 114.779605}
  28.         });
  29.           var ctaLayer = new google.maps.KmlLayer({
  30.           url: 'https://www.dropbox.com/s/6rmopz2nn2vv924/pelaihari.kml?dl=1',
  31.           zoom:18,
  32.           map: map
  33.         });
  34.         // Create an array of alphabetical characters used to label the markers.
  35.         var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  36.         // Add some markers to the map.
  37.         // Note: The code uses the JavaScript Array.prototype.map() method to
  38.         // create an array of markers based on a given "locations" array.
  39.         // The map() method here has nothing to do with the Google Maps API.
  40.         var markers = locations.map(function(location, i) {
  41.           return new google.maps.Marker({
  42.             position: location,
  43.             label: labels[% labels.length]
  44.           });
  45.         });
  46.         // Add a marker clusterer to manage the markers.
  47.         var markerCluster = new MarkerClusterer(map, markers,
  48.             {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
  49.       }
  50.       var locations = [
  51.          
  52.             php include("koneksi.php"); ?>
  53.             php
  54.            
  55.             $sql = mysql_query("SELECT * from tb_lokasi"); // query memilih entri nik pada database
  56.             if(mysql_num_rows($sql) == 0){
  57.                 header("Location: index.php");
  58.             }else{
  59.                 while($row = mysql_fetch_assoc($sql)){
  60.                    
  61.                     echo'
  62.                        {lat: '.$row['garis_lintang'].', lng: '.$row['garis_bujur'].'},
  63.                    ';
  64.                 }
  65.             }
  66.            
  67.             ?>
  68.       ]
  69.     </script>
  70.     <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
  71.     </script>
  72.     <script async defer
  73.     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_WykUgS8xTkHlZ9Ll7fpIfiuq39_1fL8&callback=initMap">
  74.     </script>
  75.   </body>
  76. </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.
Cara Membuat Marker Cluster pada peta Google API
Cara Membuat Marker Cluster pada peta Google API
Cara Membuat Marker Cluster pada peta Google API
Cara Membuat Marker Cluster pada peta Google API
Bagaimana mudah bukan, jika kalian tidak mau pusing dalam membuat kaliabisa download Source code nya dibawah

Dowload Marker Cluster pada peta Google API
Download Via [ZippyShare] - [MediaFire]

Sekian Tutorial Cara Membuat Marker Cluster pada peta Google API semoga dapat bermanfaat buat kalian yang sedang mencari tutorial ini.
Buka Komentar