KMLで表示するバルーンを、クリックで最前面に表示するサンプル

program

上の応用。

<html>
<head>
<meta charset="utf-8">
<style>
html, body { height: 100%; }
#map { height: 100%; }
</style>
<script>
var MAP_INIT_PARAM = {
        center: { lat: 34.3986543, lng: 132.4553011 },
        zoom: 12.0
    };
var KML_URL = "https://example.com/sample.kml";
var map;

function InitMap() {
    // 地図表示
    map = new google.maps.Map(document.querySelector("#map"), MAP_INIT_PARAM);

    // KMLファイルをロード
    var kmlLayer = new google.maps.KmlLayer({
        url: KML_URL + "?" + (new Date()).getTime(), // キャッシュ無視のため時刻をつける
        map: map,
        suppressInfoWindows: true // 既定のバルーンは出さない
    });

    // KmlLayerのオブジェクトをクリックしたときにバルーン表示
    var infoWindowList = [];
    kmlLayer.addListener("click", function(kmlEvent) {
        var infoWindow = new google.maps.InfoWindow({
            position: kmlEvent.latLng,
            pixelOffset: new google.maps.Size(-1, -10)
        });
        
        // クリックされたとき、それを一番手前にするイベントハンドラ設定
        var dom = document.createElement("div");
        dom.innerHTML = kmlEvent.featureData.infoWindowHtml;
        dom.infoWindow = infoWindow;
        dom.addEventListener("click", function() {
            infoWindowList.forEach(function(item){ item.setZIndex(0); });
            dom.infoWindow.setZIndex(1);
        });
        infoWindow.setContent(dom);

        // infoWindowListに追加
        infoWindowList.push(infoWindow);
        infoWindow.addListener("closeclick", function() {
            infoWindowList = infoWindowList.filter(function(item){ return item !== infoWindow; });
        });

        // 一番手前に表示
        infoWindowList.forEach(function(item){ item.setZIndex(0); });
        infoWindow.setZIndex(1);
        infoWindow.open(map);
    });

}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=InitMap" async defer></script>
</head>
<body>
    <div id="map"></div>
    ★APIキーの登録は必須★
</body>
</html>