如何设置单独的 Google 地图标记图标

Question

I know this question was asked more often. But for my code, unfortunately, none of the answers work for me. I have the following Google Maps code and would like to set my own google maps marker icon.

For this I have tried the following code. Unfortunately without success.

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js? 
key=key"></script>


<div id="map_canvas"></div>

  <script>
  var locations = [
  ['title',51.0, 11.0, 'https://www.domain.de/, 4],
   ['title',51.0, 11.0, 'https://www.domain.de/, 4],
  ['title',51.0, 11.0, 'https://www.domain.de/, 4],
  ['title',51.0, 11.0, 'https://www.domain.de/, 4],
  ['title',51.0, 11.0, 'https://www.domain.de/, 4],
  ['title',51.0, 11.0, 'https://www.domain.de/, 4]
];
var map;
var markers = [];
function init(){    
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 7,
    center: new google.maps.LatLng(51.5151, 10.4545),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: 
    [
]
  });
function setMarkers(map) {
  var image = {
   url: 'marker-path/marker.jpg',
    size: new google.maps.Size(20, 32),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
  };
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  var num_markers = locations.length;
  for (var i = 0; i < num_markers; i++) {  
    markers[i] = new google.maps.Marker({
      position: {lat:locations[i][1], lng:locations[i][2]},
      map: map,
icon: image,
      html: locations[i][0],
      id: i,
    });   
    google.maps.event.addListener(markers[i], 'click', function(){
      var infowindow = new google.maps.InfoWindow({
        id: this.id,
        content:this.html,
        position:this.getPosition()
      });
      google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
          markers[this.id].setVisible(true);
      });
  this.setVisible(false);
  infowindow.open(map);
  });
 }
}}
init();
</script>

Unfortunately, no marker is displayed. Where is the problem?

Answer 1

First of all, make sure that (1) the path to your image is correct, and (2) your image's size is in fact 20 x 32 (otherwise change Size accordingly).

Your code snippet has lots of issues, and I have amended it as follows to be able to reproduce it from my side:

<script>
    var locations = [
        ['title', 41.38879, 2.15899, 'https://www.domain.de/', 4],
        ['title', 48.85341, 2.3488, 'https://www.domain.de/', 4],
        ['title', 52.52437, 13.41053, 'https://www.domain.de/', 4]
    ];

    var map;
    var markers = [];

    function init() {
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 5,
            center: new google.maps.LatLng(51.5151, 10.4545),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: []
        });

        setMarkers(map);
    }


    function setMarkers(map) {
        var image = {
            url: 'maker-path/maker.jpg',
            size: new google.maps.Size(20, 32),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(0, 32)
        };

        var num_markers = locations.length;

        for (var i = 0; i < num_markers; i++) {
            markers[i] = new google.maps.Marker({
                position: { lat: locations[i][1], lng: locations[i][2] },
                map: map,
                icon: image,
                html: locations[i][0],
                id: i
            });
            google.maps.event.addListener(markers[i], 'click', function() {
                var infowindow = new google.maps.InfoWindow({
                    id: this.id,
                    content: this.html,
                    position: this.getPosition()
                });
                google.maps.event.addListenerOnce(infowindow, 'closeclick', function() {
                    markers[this.id].setVisible(true);
                });
                this.setVisible(false);
                infowindow.open(map);
            });
        }
    }
</script>

You can also test this first by replacing "maker-path/maker.jpg" with eg https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png .

You'll see how the icon from Google's documentation is indeed displayed.

If your own icon is not, then that means that you need to double check pointers (1) and/or (2) I stated above.

Hope this helps!