title: Google Maps Multiple Custom Markers
body: <p>So I'm trying to learn how to make a google map. I have very little understanding of javascript but am trying to learn here.</p>
  
  <p>I referenced a code online and I got to the point where I sort of understand how to add locations, marker, and a infowindow but I'm trying to figure out how to add multiple custom icons for each marker.</p>
  
  <p>Thanks for the help.</p>
  
  <pre><code>function initialize() {
  
          //add map, the type of map
          var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 6,
              center: new google.maps.LatLng(37.7749295, -122.4194155),
              mapTypeId: google.maps.MapTypeId.ROADMAP
          });
  
          //add locations
          var locations = [
              ['San Francisco: Power Outage', 37.7749295, -122.4194155],
              ['Sausalito', 37.8590937, -122.4852507],
              ['Sacramento', 38.5815719, -121.4943996],
              ['Soledad', 36.424687, -121.3263187],
              ['Shingletown', 40.4923784, -121.8891586]
          ];
  
          //declare marker call it 'i'
          var marker, i;
  
          //declare infowindow
          var infowindow = new google.maps.InfoWindow();
  
          //add marker to each locations
          for (i = 0; i &lt; locations.length; i++) {
              marker = new google.maps.Marker({
                  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                  map: map,
              });
  
              //click function to marker, pops up infowindow
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                  return function() {
                      infowindow.setContent(locations[i][0]);
                      infowindow.open(map, marker);
                  }
              })(marker, i));
          }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>