0
Googleマップapi v3で複数のポリゴンを作成しようとしています。各ポリゴンをクリックすると、情報ウィンドウ（カスタマイズ）がポップアップします。現在のところ、情報ウィンドウでポリゴンを作成することはできますが、カスタマイズすることはできます。複数のポリゴン（GoogleマップV3）の情報ウィンドウをカスタマイズする方法
誰もが白い背景と尾を削除する方法を知っています。私はそのクラス/ IDを見つけることができません。
HTML
<div id="assets-map"></div>
JS
var map;
var infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('assets-map'), {
zoom: 7,
center: {lat: 20.3344, lng: 94.8133},
scrollwheel: false,
mapTypeId: 'roadmap',
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
});
var mannFieldCoords = [
{lat: 20.3344, lng: 94.8133},
{lat: 20.3454, lng: 94.8539},
{lat: 20.1698, lng: 94.8856},
{lat: 20.1571, lng: 94.8903},
{lat: 20.1571, lng: 94.8833},
{lat: 20.1596, lng: 94.8820},
{lat: 20.1541, lng: 94.8736},
{lat: 20.1541, lng: 94.8695},
{lat: 20.2177, lng: 94.8352}
];
var a6Coords = [
{lat: 16.7500, lng: 93.3500},
{lat: 17.5000, lng: 93.3500},
{lat: 17.5000, lng: 94.5167},
{lat: 16.7500, lng: 94.3500}
];
var ior4Coords = [
{lat: 18.8083, lng: 95.2083},
{lat: 18.8083, lng: 95.2750},
{lat: 18.3500, lng: 95.3500},
{lat: 18.3500, lng: 95.2667}
];
var ior6Coords = [
{lat: 18.1667, lng: 95.3000},
{lat: 18.2833, lng: 95.3000},
{lat: 18.2833, lng: 95.3333},
{lat: 18.1667, lng: 95.3958}
];
var mannField = new google.maps.Polygon({
paths: mannFieldCoords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8
});
mannField.setMap(map);
mannField.addListener('click', showArraysMF);
var a6 = new google.maps.Polygon({
paths: a6Coords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8
});
a6.setMap(map);
a6.addListener('click', showArraysA6);
var ior4 = new google.maps.Polygon({
paths: ior4Coords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8
});
ior4.setMap(map);
ior4.addListener('click', showArraysIor4);
var ior6 = new google.maps.Polygon({
paths: ior6Coords,
strokeWeight: 0,
fillColor: '#374ea2',
fillOpacity: 0.8
});
ior6.setMap(map);
ior6.addListener('click', showArraysIor6);
infoWindow = new google.maps.InfoWindow;
}
function showArraysMF(event) {
var vertices = this.getPath();
var contentString = '<div id="iw_container">' +
'<div class="iw_title">Mann Field <span>(52 sq-km)</span></div>' +
'<div class="iw_content">Performance Compensation Contract since 1996, extended for 11 years until August 2024</div>' +
"<a href='mann-field.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
function showArraysA6(event) {
var vertices = this.getPath();
var contentString = '<div id="iw_container">' +
'<div class="iw_title">A-6 <span>(9830 sq-km)</span></div>' +
'<div class="iw_content">PSC signed in 2007, Pyi Thar-1 <strong>first gas discovery</strong> in Rakhine Foldbelt of Myanmar deepwaters</div>' +
"<a href='block-a6.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
function showArraysIor4(event) {
var vertices = this.getPath();
var contentString = '<div id="iw_container">' +
'<div class="iw_title">IOR-4 <span>(380 sq-km)</span></div>' +
'<div class="iw_content">Brown field, re-development project governed by IPR contract</div>' +
"<a href='ior-4.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
function showArraysIor6(event) {
var vertices = this.getPath();
var contentString = '<div id="iw_container">' +
'<div class="iw_title">IOR-6 <span>(116 sq-km)</span></div>' +
'<div class="iw_content">Brown field, re-development project governed by IPR contract</div>' +
"<a href='ior-6.html'><i class='fa fa-arrow-right' aria-hidden='true'></i></a>"
'</div>';
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
私の仕事のcodepen例。
これにはtutorialに従ってみましたが、マップは表示されません。
InfoWindowはInfoWindowです。完全にスタイルを設定したい場合は、[インフォボックス]（https://github.com/googlemaps/v3-utility-library/tree/master/infobox）や[InfoBubble]（https： /github.com/googlemaps/v3-utility-library/tree/master/infobubble） – geocodezip
私はInfoboxで少し掘り下げましたが、うまく動作しません。 – Leslie
これは、それよりも良い質問かもしれません。 SOとその文書には実例がありますが。 – geocodezip