Dynamic Blinkie Text Generator at TextSpace.net

Feedburner

I heart FeedBurner

Minggu, 05 Maret 2017

Multi Marker Javascript

Masih berhubungan dengan Google Maps, kali ini saya akan mengajarkan bagaimana menampilkan banyak marker pada map. Kalau pada sebelumnya kita menampilkan banyak marker dengan menggunakan mouse click, kali ini kita akan menampilkan secara bersamaan, dalam sekali load page.
Ceritanya contohnya disini adalah kita ingin tahu letak gunung-gunung di Indonesia, tapi tidak semua, dikit aja ya haha.
Seperti biasa untuk persiapannya, hanya butuh text editor biasa.
Untuk menampilkan banyak marker, maka kita membutuhkan banyak koordinat dari marker. Disini kita gunakan array untuk menampung koordinat dari marker-marker atau lokasi-lokasi dari gunung-gunung tersebut.

Membuat Array Markers

Pertama mari kita buat array yang berisi koordinat lokasi gunung-gunungnya. Disini saya masukin 8 gunung di daerah jawa ya.
1
2
3
4
5
6
7
8
9
10
var markers = [
      ['Taman Nasional Gunung Gede Pangrango', -6.777797700000000000 , 106.948689100000020000],
      ['Gunung Papandayan', -7.319999999999999000, 107.730000000000020000],
      ['Gunung Cikuray', -7.3225, 107.86000000000001],
      ['Gunung Bromo', -7.942493600000000000, 112.953012199999990000],
      ['Gunung Semeru', -8.1077172, 112.92240749999996],
      ['Gunung Merapi', -7.540717500000000000, 110.445724100000000000],
      ['Gunung Merbabu', -7.455000000000001000, 110.440000000000050000],
      ['Gunung Prau', -7.1869444, 109.92277779999995]
    ];
untuk yang bertanya bagaimana nyari koordinat dari lokasi-lokasinya? Simple! googling aja dengan keyword latitude dan longitude lokasi yang mau dicari. haha :D
Disini kita buat array dengan 8 tempat. Terdapat 3 indeks, indeks pertama nama lokasi, kedua adalah latitude, dan yang ketiga adalah longitude. Indeks ini akan digunakan nanti ketia di looping saat akan menampilkan marker ke dalam maps.

Menampilkan Array Marker dengan looping

Selanjutnya seperti cara biasa kita tampilkan marker ke dalam maps. Perbedaannya kali ini adalah kita gunakan looping, sebanyak index atau size dari array kita.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var infowindow = new google.maps.InfoWindow(), marker, i; // kita buat beberapa variabel untuk keperluan looping.
    for (i = 0; i < markers.length; i++) {  // loop sebanyak size dari array
    pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
    marker = new google.maps.Marker({
        position: pos,
        map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
    }
Penjelasan dari script diatas cukup mudah dan simple jika kalian teliti dan cermat. Didalam looping ada dua hal kita lakukan yaitu menambahkan markers dan juga menambahkan info window ke dalam marker tersebut.
Yang perlu kalian pahami adalah, pertama untuk markers, position dari markers diambil dari array (markers[i][1], markers[i][2]). Seperti yang sebelumnya saya katakan, indeks 1 dan 2 adalah untuk Lat dan Long. Sama halnya dengan info window, kita gunakan indeks 0. (Ingat! array dimulai dari 0 guys! )

Membuat Map menampilkan semua markers.

Maksudnya apa ya? Maksudnya disini adalah kita buat agar maps kita tidak tampil dalam satu lokasi tertentu saja, seperti di tutorial sebelumnya, mapnya terbatas hanya di Depok saja, jadi ketika ada markers diluar itu, kita tidak bisa melihatnya. Istilahnya maps mencakupi atau melingkupi marker-marker kita. Kita sebut properties atau fungsi Google Maps ini dengan Bounds.
Bounds, boundaries, batasan. Yah seperti itulah pokonya. Kita tambahkan script berikut:
1
2
3
var bounds = new google.maps.LatLngBounds(); // diluar looping
bounds.extend(pos); // di dalam looping
map.fitBounds(bounds); // setelah looping

Source Code Lengkap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map-canvas {
        width: 500px;
        height: 500px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
     
    var markers = [
      ['Taman Nasional Gunung Gede Pangrango', -6.777797700000000000 , 106.948689100000020000],
      ['Gunung Papandayan', -7.319999999999999000, 107.730000000000020000],
      ['Gunung Cikuray', -7.3225, 107.86000000000001],
      ['Gunung Bromo', -7.942493600000000000, 112.953012199999990000],
      ['Gunung Semeru', -8.1077172, 112.92240749999996],
      ['Gunung Merapi', -7.540717500000000000, 110.445724100000000000],
      ['Gunung Merbabu', -7.455000000000001000, 110.440000000000050000],
      ['Gunung Prau', -7.1869444, 109.92277779999995]
    ];
      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(), marker, i;
    var bounds = new google.maps.LatLngBounds(); // diluar looping
    for (i = 0; i < markers.length; i++) { 
    pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(pos); // di dalam looping
    marker = new google.maps.Marker({
        position: pos,
        map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
    map.fitBounds(bounds); // setelah looping
    }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
Hasilnya kurang lebih akan seperti ini:
Hasil Akhir
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)