title: Google maps - add new icon as Marker
body: <p>I have a Google map which uses the below code that works fine.
  I would like to change the default marker to an icon of my own (for reference url: <a href="http://website.com/icon.png" rel="nofollow">http://website.com/icon.png</a>).</p>
  
  <p>I just don't know where to put the code to make this happen in my code below.</p>
  
  <p>Any help appreciated.</p>
  
  <pre><code>function render_map($el) {
  
  // var
  var $markers = $el.find('.marker');
  
  // vars
  var args = {
      zoom: 16,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  // create map               
  var map = new google.maps.Map($el[0], args);
  
  // add a markers reference
  map.markers = [];
  
  // add markers
  $markers.each(function() {
  
      add_marker($(this), map);
      map.setOptions({
          styles:
  
              [{
              "stylers": [{
                  "visibility": "on"
              }, {
                  "saturation": -100
              }, {
                  "gamma": 0.54
              }]
          }, {
              "featureType": "road",
              "elementType": "labels.icon",
              "stylers": [{
                  "visibility": "off"
              }]
          }, {
              "featureType": "water",
              "stylers": [{
                  "color": "#0091c1"
              }]
          }, {
              "featureType": "poi",
              "elementType": "labels.icon",
              "stylers": [{
                  "visibility": "off"
              }]
          }, {
              "featureType": "poi",
              "elementType": "labels.text",
              "stylers": [{
                  "visibility": "simplified"
              }]
          }, {
              "featureType": "road",
              "elementType": "geometry.fill",
              "stylers": [{
                  "color": "#ffffff"
              }]
          }, {
              "featureType": "road.local",
              "elementType": "labels.text",
              "stylers": [{
                  "visibility": "simplified"
              }]
          }, {
              "featureType": "water",
              "elementType": "labels.text.fill",
              "stylers": [{
                  "color": "#ffffff"
              }]
          }, {
              "featureType": "transit.line",
              "elementType": "geometry",
              "stylers": [{
                  "gamma": 0.48
              }]
          }, {
              "featureType": "transit.station",
              "elementType": "labels.icon",
              "stylers": [{
                  "visibility": "off"
              }]
          }, {
              "featureType": "road",
              "elementType": "geometry.stroke",
              "stylers": [{
                  "gamma": 7.18
              }]
          }]
      });
  });
  
  // center map
  center_map(map);
  
  }
  
  
  function add_marker($marker, map) {
  
  // var
  var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
  
  // create marker
  var marker = new google.maps.Marker({
      position: latlng,
      map: map
  
  });
  
  // add to array
  map.markers.push(marker);
  
  // if marker contains HTML, add it to an infoWindow
  if ($marker.html()) {
      // create info window
      var infowindow = new google.maps.InfoWindow({
          content: $marker.html()
      });
  
      // show info window when marker is clicked
      google.maps.event.addListener(marker, 'click', function() {
  
          infowindow.open(map, marker);
  
      });
  }
  
  }
  
  function center_map(map) {
  
  // vars
  var bounds = new google.maps.LatLngBounds();
  
  // loop through all markers and create bounds
  $.each(map.markers, function(i, marker) {
  
      var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
  
      bounds.extend(latlng);
  
  });
  
  // only 1 marker?
  if (map.markers.length == 1) {
      // set center of map
      map.setCenter(bounds.getCenter());
      map.setZoom(16);
  } else {
      // fit to bounds
      map.fitBounds(bounds);
  }
  
  }
  
  
  $(document).ready(function() {
  
  $('.acf-map').each(function() {
  
      render_map($(this));
  
  });
  
  });
  </code></pre>