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

Question

我有一个谷歌地图，使用下面的代码，工作正常。 我想将默认标记更改为我自己的图标（对于参考url：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 
      });