0

Googleマップに複数のマーカーを配置するために使用される createMarker() 関数があります。コードは次のとおりです。

     function createMarker(point,custid,streetadd,city,state,zip,address,phone,website,co) 
    {   
        var infowindowHover,infowindowClick;

        var marker = new google.maps.Marker({                
            position: point,                
            map: map,
            icon: image, 
        });

        var boxClickText = document.createElement("div");            
        boxClickText.className = "infoBackground";

        var markerMarkup = "<div id='infobox'><TABLE class='test'><TR><TD colspan='2'><B class='title'>";
            markerMarkup = markerMarkup + co + "</B></TD></TR><TR><TD colspan='2'>";
            markerMarkup = markerMarkup + streetadd + "</TD></TR><TR><TD colspan='2'>";
            markerMarkup = markerMarkup + city + "," + state + " " + zip + "</TD></TR><TR><TD colspan='2'>";
            markerMarkup = markerMarkup + phone + "</TD></TR><TR><TD colspan='2'>";
            if(website.indexOf("http://")>0) { markerMarkup = markerMarkup +"<a href="; }
            else{  markerMarkup = markerMarkup +"<a href=http://"; }
            markerMarkup = markerMarkup + website + " target=_blank>" + website + "</a></TD></TR><TR><TD class='availableStyle'>";                
            markerMarkup = markerMarkup +'<a href="javascript:;" onclick="setstyles('+ custid +',\'' + streetadd + '\'' + ',\'' + city + '\'' + ',\'' + state + '\'' + ',\'' + zip + '\'' + ',\'' + address + '\''+ ',\'' + phone + '\''+ ',\'' + website + '\''+ ',\'' + co + '\'' + ')";">see available styles</a>';

            //markerMarkup = markerMarkup + '<input type="button" value="see available styles" onclick="setstyles('+ custid +',\'' + streetadd + '\'' + ',\'' + city + '\'' + ',\'' + state + '\'' + ',\'' + zip + '\'' + ',\'' + address + '\''+ ',\'' + phone + '\''+ ',\'' + website + '\''+ ',\'' + co + '\'' + ')" />';
markerMarkup = markerMarkup + "</TD></TR></TABLE></div>";

        boxClickText.innerHTML = markerMarkup;


        var myOptions_click = {
            content: boxClickText
        //,disableAutoPan: true
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-140, 0)
        ,zIndex: null
        ,boxStyle: {                 
            //opacity: 0.75
            //,width: "280px"
            margin:"-58px 0px 0px 148px"
            }
        ,closeBoxMargin: "10px 2px 2px 2px"
        ,closeBoxURL: "http://mansi:2525/pc-new/images/mapclosebutton.gif"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,id: "infoWindowClick"
        ,enableEventPropagation: false
        };

        var ib = new InfoBox();

        google.maps.event.addListener(marker, "click", function (e) {
            ib.close();
            ib.setOptions(myOptions_click);
            ib.open(map, this);
        });

        return marker;

    }

Google マップ V3から同様の質問を参照しました - 一度に表示されるインフォボックスを 1 つだけ許可し、同じ方法でコードを適用しましたが、目的の結果が得られません。

Google マップ V3 - 一度に表示できるインフォボックスは 1 つだけです

4

1 に答える 1

1

マーカーを作成するたびに、新しいインフォボックスを宣言します。したがって、「ib」はそのマーカー用に作成されたインフォボックスを参照し、他のものは参照しません。

createMarker 関数の範囲外で infobox 変数を設定する必要があります。次に、イベント リスナー内で、古いインフォボックスを閉じてから、新しいインフォボックスを作成します。

var ib;

function createMarker(<params>) {
     google.maps.event.addListener(marker, "click", function (e) {
        if (typeof ib === 'object') {
            ib.close();
        }
        ib = new Infobox();
        ib.setOptions(myOptions_click);
        ib.open(map, this);
    });
}

マーカーごとに新しいインフォボックスが必要な場合は、インフォボックスの配列を保存できます。

var ibs = [];

var closeInfoBox = function() {
    for (var i in ibs) {
        ibs[i].close();
    }
}

function createMarker(<params>) {
    var ibIndex = ibs.push(new Infobox()) - 1,
        ib = ibs[ibIndex];

    google.maps.event.addListener(marker, "click", function (e) {
        closeInfoBox();
        ib.setOptions(myOptions_click);
        ib.open(map, this);
    });

}
于 2013-01-02T07:05:48.057 に答える