Javascript Google Maps API - マーカーをクリック可能なリンクにする

Question

私はGoogleマップAPIを使い、それぞれにリンクを持つ複数のマーカーを作成するのに苦労しています。 javascriptのnoobは役に立ちません。

この私のコードで、これまで：

<div id="map"></div> 

function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 12, 
    center: {lat: -27.469703, lng: 153.025190} 
    }); 

    // Create an array of alphabetical characters used to label the markers. 
    var labels = 'X'; 

    // Add some markers to the map. 
    // Note: The code uses the JavaScript Array.prototype.map() method to 
    // create an array of markers based on a given "locations" array. 
    // The map() method here has nothing to do with the Google Maps API. 
    var markers = locations.map(function(location, i) { 
    return new google.maps.Marker({ 
     position: location, 
     label: labels[i % labels.length] 
    }); 
    }); 

    // Add a marker clusterer to manage the markers. 
    var markerCluster = new MarkerClusterer(map, markers, 
     {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
    } 

    var locations = [ 
    {lat: -27.449916, lng: 153.044031}, 
    {lat: -27.476536, lng: 153.020148}, 
    ] 

</script> 
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=APIKEYHERE&callback=initMap"> 

マップは、細かい表示され、マーカーがありますが、私はリンクを実装しようとしたすべてのものがあり失敗した。

ありがとうございます！

Answer 1

各マーカーにクリックリスナーを追加する必要があります。下記を参照：

var markers = locations.map(function(location, i) { 
    var marker = new google.maps.Marker({ 
     position: location, 
     label: labels[i % labels.length] 
    }); 

    marker.linkUrl = 'https://google.com'; 

    marker.addListener('click', function() { 

     window.location = this.linkUrl; 

    }); 

    return marker; 
});