Googleは国のマーカーへのハイパーリンクをマップします

Question

私のウェブサイトには、私がそれらに国マーカーを付けた場所を示すためのGoogleマップがあります。ハイパーリンクにする方法はありますか？ユーザーがこれらのマーカーをクリックすると、特定の国の写真を含むWebページにリンクされます。

<div id="map"></div> 
<script> 
function initMap() { 
    var myLatLng = {lat: 51.491217, lng: -0.142822}; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: myLatLng, 
     zoom: 1, 
     streetViewControl: false 
    }); 
    var infoWindow = new google.maps.InfoWindow({map: map}); 

    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 
     infoWindow.setContent('Location found.'); 
     map.setCenter(pos); 
     }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleLocationError(false, infoWindow, map.getCenter()); 
    } 
      geocoder = new google.maps.Geocoder(); 

    function getCountry(country) { 
     geocoder.geocode({ 'address': country }, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location 
       }); 
      } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {  
     setTimeout(function() { 
      Geocode(address); 
     }, 200); 
     } else { 
       alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
    } 
    getCountry('France'); 
    getCountry('Sweden'); 
    getCountry('Croatia'); 
    getCountry('New Zealand'); 
    getCountry('Laos'); 
    getCountry('Vietnam'); 
    getCountry('Tonga'); 
    getCountry('Vanuatu'); 
    getCountry('France'); 
    getCountry('Indonesia'); 
    getCountry('Malaysia'); 
    getCountry('Samoa'); 
    } 



    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
          'Error: The Geolocation service failed.' : 
          'Error: Your browser doesn\'t support geolocation.'); 
    } 
</script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 

Answer 1

はちょうどあなたのマーカーにイベントリスナーを追加します。 はここに私のコードです。したがって、このようなものに動作します：マーカー上のイベントリスナーの例については

marker.addListener('click', function() { 
    window.location.href = 'http://example.com'; 
}); 

がここにドキュメントを参照してください。私はマップとJavaScriptをGoogleに新しいですしたようhttps://developers.google.com/maps/documentation/javascript/markers#animate