谷歌地图 - 添加新图标作为标记

Question

我有一个谷歌地图，它使用下面的代码可以正常工作。 我想将默认标记更改为我自己的图标（参考网址：http://website.com/icon.png）。

我只是不知道将代码放在哪里才能在下面的代码中实现这一点。

任何帮助表示赞赏。

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

});

});

Answer 1

documented way to add a marker with a custom icon 是；

var marker = new google.maps.Marker({
                   position: latlng, 
                   map: map, 
                   icon: http://website.com/icon.png
             });