Pusat Ilmu Secara Detil

Display Google Maps Multiple Markers Different Icons

Display Google Maps Multiple Markers Different Icons

In general, we create marker on google map by using default icon, which its color is red. Well, now in this tutorial we will create five markers for five locations with different icons.

In this tutorial, we use the icon that we have stored in the local directory. If you want to use url address which provide icon, the principle is same, just change the path of icon.

Here is the output we will create in next stage, as shown in Figure 1 below:
(Fig.1)

As shown in Fig.1, we have five locations marked with markers. Where each for the location has a different icon marker.

If you're new in this tutorial anda want to know more about how to create marker on google maps, read the tutorial below :

Another Example About Making Markers on Google Maps :

As described above, we prepare the icon that we store in the local directory. Here we suppose the marker icon is in the directory: icon.

Here is the script to call the path of each icon:
// we create variabel iconMarker to hold the location of icon
    var iconMarker = 'icon/';
    
    // variable uniqueIcons to store different icon
    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'
    ]

Completed Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi Marker Map with different icons</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    <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() {
    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]
    ];
    
 
    var iconMarker = 'icon/';
    
    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;
    
    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);
      
      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> 
<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 Icon 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>

Share this:

You Might Also Like:

Disqus Comments