Multiple Marker pada Google Maps dengan Icon yang Berbeda

Pada umumnya pembuatan marker pada google maps hanya menggunakan satu icon default, yaitu berwarna merah. Nah sekarang pada tutorial edisi google maps kali ini, kita akan membuat marker untuk lima lokasi dengan icon yang berbeda-beda.

Untuk iconnya, anda dapat menggunakan alamat url yang memiliki icon marker seperti : http://maps.google.com/mapfiles/ms/icons/. Ataupun kita dapat menggunakan icon yang telah dulu kita simpan pada local directory. Disini kita akan menggunakan icon yang berasal dari local directory, untuk yang menggunkan url, prinsipnya sama saja, tinggalh dirubah path nya aja.

Berikut ini adalah output yang akan kita buat, seperti ditampilkan oleh Gambar.1 dibawah ini :

Gambar.1

Seperti yang terlihat pada Gambar.1, kita memiliki lima lokasi yang sudah ditandai dengan marker. Dimana masing-masing untuk lokasi tersebut memiliki icon marker yang berbeda-beda.

Untuk pemahaman tentang pembuatan marker pada google maps edisi ini, silahkan baca tutorial google maps sebelumnya :

Contoh Lainnya Tentang Pembuatan Marker pada Google Maps
Cara menambahkan marker pada Google Maps
Membuat multiple marker pada Google Maps
Menampilkan marker Google Maps dari Database

Seperti yang dijelaskan diatas, kita mempersiapkan icon pada local directory. Disini kita umpamakan icon markernya berada pada directory : icon.

Maka untuk pemanggilannya dilakukan sebagai berikut :

// Lokasi folder dari icon
    var iconMarker = 'icon/';
    
    // variabel uniqueIcons untuk menyimpan icon yang berbeda-bedan
    var uniqueIcons = [
      iconMarker + 'red-dot.png',
      iconMarker + 'green-dot.png',
      iconMarker + 'blue-dot.png',
      iconMarker + 'orange-dot.png',
      iconMarker + 'purple-dot.png',
      iconMarker + 'pink-dot.png',      
      iconMarker + 'yellow-dot.png'
    ]

Kode lengkap untuk marker Google Map dengan icon yang berbeda

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="ilmu-detil.blogspot.com">
    <title>Multi Marker Map Dengan Icon yang berbeda-beda</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    
    <!-- Bagian js -->
    <script src='assets/js/jquery-1.10.1.min.js'></script>       
    
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    
    <script>
    function initialize() {
    // Data yang disimpan dalam variabel array locations
    var locations = [
      ['<h4>Bondi Beach</h4>', 5.550176, 95.319263],
      ['<h4>Ibukota Kab.Aceh Jaya</h4>', 4.727890, 95.601373],
      ['<h4>Ibukota Abdya</h4>', 3.818570, 96.831841],
      ['<h4>Ibukota Kotamadya Langsa</h4>', 4.476020, 97.952447],
      ['<h4>Ibukota Kotamadya Sabang</h4>', 5.909284, 95.304742]
    ];
    
    // Lokasi folder dari icon
    var iconMarker = 'icon/';
    
    // variabel uniqueIcons untuk menyimpan icon yang berbeda-bedan
    var uniqueIcons = [
      iconMarker + 'red-dot.png',
      iconMarker + 'green-dot.png',
      iconMarker + 'blue-dot.png',
      iconMarker + 'orange-dot.png',
      iconMarker + 'purple-dot.png',
      iconMarker + 'pink-dot.png',      
      iconMarker + 'yellow-dot.png'
    ]
    var iconsLength = uniqueIcons.length;

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(4.845582, 96.271539),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      panControl: false,
      zoomControlOptions: {
         position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });

    var infowindow = new google.maps.InfoWindow();

    var markers = new Array();
    
    var iconCounter = 0;
    
    // Membuat marker dengan icon yang berbeda-beda
    for (var i = 0; i < locations.length; i++) {  
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: uniqueIcons[iconCounter]
      });

      markers.push(marker);
      
      // Membuah event click dan menambah infowindows
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
      
      iconCounter++;
      
      if(iconCounter >= iconsLength) {
        iconCounter = 0;
      }
    }

    function autoCenter() {
      
      var bounds = new google.maps.LatLngBounds();
      
      for (var i = 0; i < markers.length; i++) {  
                bounds.extend(markers[i].position);
      }
      
      map.fitBounds(bounds);
    }
    autoCenter();
    };
  </script> 
    
</head>
<body onload="initialize()">
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
            Pusat Ilmu Secara Detil</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="index.html">Home</a></li>
                <li class="clr2"><a href="">Programming</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</nav>
</br></br></br></br>
<!--- Bagian Judul-->   
<div class="container" style="margin-top:10px"> 

    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">Different Marker On The Location of Google Maps </div>
                    <div class="panel-body">
                        <div id="map" style="width: 700px; height: 600px;"></div>
                    </div>
            </div>
        </div>  
    </div>
</div>  
</body>
</html>

Multiple Marker pada Google Maps dengan Icon yang Berbeda

Kode lengkap untuk marker Google Map dengan icon yang berbeda

0 Response to "Multiple Marker pada Google Maps dengan Icon yang Berbeda"

Posting Komentar