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.

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.

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.

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.

Cara Membuat Marker Cluster pada peta Google API

Bagaimana Cara membuat marker pada peta ?.

1. Buat Database

2. Buat koneksi.php

3. Buat index.php

7/02/2018 gis, google api

Share this post, please!