title: how to show different icon for google map markers?
body: <p>i want to show different marker icons in google map.i have enclosed my code .here i have different icons in that markers1[7].i want to show these icons in google map i have added fiddle <a href="https://jsfiddle.net/h9seLt22/7/" rel="nofollow">https://jsfiddle.net/h9seLt22/7/</a> instead of default marker iconi need to show dynamic marker icon </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('myApp', [])
      .controller('MapCtrl', [
      '$scope', '$http', '$compile',
  
  function ($scope, $http, $compile) {
      //-------------------------------------------------------------------------------------------------------------------------------------------------
      $scope.find = function () {
  
          var gmarkers1 = [];
          var markers1 = [];
          var infowindow = new google.maps.InfoWindow({
              content: ''
          });
  
          // Our markers
          markers1 = [
              ['0', 'Madivala', 12.914494, 77.560381, 'computer science,electronic system,communication thoery,english', 'as12', 'Abi Tech ACC','http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg'],
              ['1', 'Majestic', 12.961229, 77.559281, 'electronic system,Telecommunication,optical&amp;fiber optics', 'as13', 'Vell Infotech','http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Sign-LogOff-icon.png'],
              ['2', 'Ecity', 12.92489905, 77.56070772, 'communication thoery,english,Digital Electronics,signal&amp;systems', 'as14', 'vinoth coching center','http://icons.iconarchive.com/icons/artua/mac/512/Intranet-icon.png'],
              ['3', 'Jp nagar', 12.91660662, 77.52047465, 'Digital Electronics,signal&amp;systems', 'as15', 'Gpy tech archi','http://www.psdgraphics.com/file/upload-icon.jpg']
          ];
  
          /**
           * Function to init map
           */
  
          function initialize() {
              var center = new google.maps.LatLng(12.9667, 77.5667);
              var mapOptions = {
                  zoom: 12,
                  center: center,
                  mapTypeId: google.maps.MapTypeId.TERRAIN
              };
  
              map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
              for (i = 0; i &lt; markers1.length; i++) {
                  addMarker(markers1[i]);
              }
          }
  
          /**
           * Function to add marker to map
           */
  
          function addMarker(marker) {
              var category = marker[4];
              var title = marker[1];
              var pos = new google.maps.LatLng(marker[2], marker[3]);
              var content = marker[1];
              var fullContent = marker.slice(1, 6).join();
  
              var marker1 = new google.maps.Marker({
                  title: title,
                  position: pos,
                  category: category,
                  map: map
              });
  
              gmarkers1.push(marker1);
  
              // Marker click listener
              google.maps.event.addListener(marker1, 'click', (function (marker1, idx, markers1) {
                  return function () {
                      console.log('Gmarker 1 gets pushed');
                      var compiled = '&lt;div&gt;&lt;div&gt;' + markers1[idx][0] + ' &lt;/div&gt;&lt;div&gt;' + markers1[idx][1] + ' &lt;/div&gt;&lt;div&gt;' + markers1[idx][2] + ' &lt;/div&gt;&lt;div&gt;&lt;button id="' + markers1[idx][5] + '"&gt;Get&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;';
                      var infowindow = new google.maps.InfoWindow({
                          content: compiled
                      });
                      infowindow.open(map, marker1);
                      map.panTo(this.getPosition());
                      map.setZoom(15);
                  }
              })(marker1, i, markers1));
          }
          $(document.body).on('click', 'button', function () {
              console.log(this.id);
          });
          /**
           * Function to filter markers by category
           */
  
          filterMarkers = function (category) {
              for (i = 0; i &lt; markers1.length; i++) {
                  marker = gmarkers1[i];
                  // If is same category or category not picked
                  if (marker.category.toLowerCase().indexOf(category.toLowerCase()) &gt; -1 || category.length === 0) {
                      marker.setVisible(true);
                  }
                  // Categories don't match 
                  else {
                      marker.setVisible(false);
                  }
              }
          }
  
          // Init map
          initialize();
  
      }
  }]);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #map-canvas {
          width: 500px;
          height: 500px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="myApp"&gt;
      &lt;div ng-controller="MapCtrl" ng-init="find()"&gt;
          &lt;div id="map-canvas"&gt;&lt;/div&gt;
          &lt;select id="type" onchange="filterMarkers(this.value);"&gt;
              &lt;option value=""&gt;Please select category&lt;/option&gt;
              &lt;option value="computer science"&gt;computer science&lt;/option&gt;
              &lt;option value="electronic system"&gt;electronic system&lt;/option&gt;
              &lt;option value="communication thoery"&gt;communication thoery&lt;/option&gt;
              &lt;option value="english"&gt;english&lt;/option&gt;
              &lt;option value="optical&amp;fiber optics"&gt;optical&amp;fiber optics&lt;/option&gt;
              &lt;option value="Digital Electronics"&gt;Digital Electronics&lt;/option&gt;
              &lt;option value="signal&amp;systems"&gt;signal&amp;systems&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;/div</code></pre>
  </div>
  </div>
  </p>