Google maps - add new icon as Marker

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: ).

I just don't know where to put the code to make this happen in my code below.

Any help appreciated.

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));

});

});


ANSWERS:


The documented way to add a marker with a custom icon is;

var marker = new google.maps.Marker({
                   position: latlng, 
                   map: map, 
                   icon: 
             });


 MORE:


 ? Prevent rotation of markers on google map in android
 ? Change Google Map marker color with external jQuery
 ? marker google maps swift infowindow
 ? drop a pin when user touch screen in google maps swift
 ? How to segue to a new ViewController from infowindow of Google Maps in Swift?
 ? Javascript to get latitude and longitude
 ? Javascript to get latitude and longitude
 ? Javascript to get latitude and longitude
 ? Google map api javascript get latitude and longitude?
 ? How to get all latitudes and longitudes from source place to destination place