0
Googleマップのカスタムマーカーを情報ウィンドウとともに使用しました。私はボタンをクリックすると情報ウィンドウを開く機能を追加する必要があります。別々の内容のマーカーが複数あります。ここでは、単一のボタンをクリックして1つのInfoウィンドウを開くソリューションを見つけました。https://stackoverflow.com/a/18334899/6191987Googleマップ：ボタンをクリックすると特定の情報ウィンドウが開きます
私は上記の解決策を試しましたが、ボタンクリックでそれぞれの特定の情報ウィンドウを開く方法を知りません。ここで
は私がしようとしているどのようなコードです：html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.btns {
display: inline-block;
width: 100%;
margin-bottom: 20px
}
.btns a {
display: block;
padding: 10px;
float: left;
background: #eee;
margin-right: 5px;
text-decoration: none;
}<div class="btns">
<a href="#" onclick="myClick(0);">Open Info Window 1</a>
<a href="#" onclick="myClick(0);">Open Info Window 2</a>
<a href="#" onclick="myClick(0);">Open Info Window 3</a>
</div>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(40.712696, -74.005019),
mapTypeId: 'roadmap',
styles: [{
elementType: 'geometry',
stylers: [{
color: '#242f3e'
}]
}, {
elementType: 'labels.text.stroke',
stylers: [{
color: '#242f3e'
}]
}, {
elementType: 'labels.text.fill',
stylers: [{
color: '#746855'
}]
}, {
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
}, {
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
}, {
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{
color: '#263c3f'
}]
}, {
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{
color: '#6b9a76'
}]
}, {
featureType: 'road',
elementType: 'geometry',
stylers: [{
color: '#38414e'
}]
}, {
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{
color: '#212a37'
}]
}, {
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{
color: '#9ca5b3'
}]
}, {
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{
color: '#746855'
}]
}, {
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{
color: '#1f2835'
}]
}, {
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{
color: '#f3d19c'
}]
}, {
featureType: 'transit',
elementType: 'geometry',
stylers: [{
color: '#2f3948'
}]
}, {
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{
color: '#d59563'
}]
}, {
featureType: 'water',
elementType: 'geometry',
stylers: [{
color: '#17263c'
}]
}, {
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{
color: '#515c6d'
}]
}, {
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{
color: '#17263c'
}]
}]
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [{
position: new google.maps.LatLng(40.712696, -74.005019),
content: 'test content one',
type: 'parking'
}, {
position: new google.maps.LatLng(40.712753, -74.006081),
content: 'test content two',
type: 'parking'
}, {
position: new google.maps.LatLng(40.713664, -74.007819),
content: 'test content three <a href="http://www.google.com">A link to google</a>',
type: 'library'
}];
var infowindow = new google.maps.InfoWindow({
content: ""
});
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
content: feature.content,
icon: icons[feature.type].icon,
map: map
});
var content = "<a href='" + feature.content + "'>A link to google</a>";
marker.addListener('click', function() {
infowindow.setContent('<div><strong>' + marker.content + '</strong></div>');
infowindow.open(map, marker);
});
});
}
//on click function
function myClick(id) {
google.maps.event.trigger(markers[id], 'click');
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvkk7wNQcIYXZ7S8XNG8cG-elq0QE2v3k&callback=initMap">
</script>JSFiddle：https://jsfiddle.net/vishnuprasadps/3wk7q3fd/
うわーリンクを生成することができます..！本当に偉大なテリー..それはうまくいきます。また、特別な正確な説明をありがとう。ハッピーコーディング:) – Vishnu