google maps api: marker 以外の情報ウインドウを表示させない方法

Question

こんにちは。いつもお世話になってます。
Google Maps APIでカスタム情報ウインドウを表示させるだけのシンプルなサイトを作っていて、カスタム情報ウインドウを表示させることはできたのですが、他の場所を押すとその場所のデフォルトの情報ウインドウが開かれてしまいます。カスタム情報ウインドウと重なったり、予期せず押してしまって邪魔なので消したいのですが、どうやって消せるのかわからず質問させていただきました。

予想ではこの下のコードをどうにかする必要があると思ったので、いろいろやってみたのですが、うまくいかず。。しかしListenerはこれ一つしかないです。（1番下に全てのコードを載せてあります。）

marker.addListener("click", function () {
    ib.open(theMap, this);
});

こういうやつを消したいです

詳しい方どうか教えてくださいませんでしょうか？宜しくお願いします。

      function initialize() {
        var secheltLoc = new google.maps.LatLng(00.000000,000.000000);

        var myMapOptions = {
           zoom: 15
          ,center: secheltLoc
          ,mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

        
		var icon = "images/icon.png"

        var marker = new google.maps.Marker({
          map: theMap,
          position: new google.maps.LatLng(00.000000,000.000000),
          visible: true,
          icon: icon
        });

        var viewport = {
    		width  : $(window).width(),
    		height : $(window).height()
		};

        var infoWindowHtml = 
        "<div id='content_wrapper'>"
	        +"<div id='infoWin'>"
		        +"<div>"
		        	+"<h1 style=''>Example Inc.</h1>"
		        	+"<blockquote>We are the best.</blockquote>"
		        +"</div>"
		        +"<ul id='sns'>"
		        	+"<li><a href='#'></a></li>"
		        	+"<li><a href='#'></a></li>"
		        	+"<li><a href='#'></a></li>"
		        	+"<li><a href='#'></a></li>"
		        	+"<li><a href='#'></a></li>"
		        	+"<li><a href='#'></a></li>"
		        +"</ul>"
		        +"<button class='more_open'>More info</button>"
	        +"</div>"
		    
		+"</div> <!-- Close content_wrapper -->"


        var pxOffX;
        var pxOffY;

        var mobileWidth = 768;
        var infoWinWidth, infoWinHeight;

        if(viewport.width < mobileWidth){
        	pxOffX = -(viewport.width/2); //it moves infowindow when you move the map
        	pxOffY = -(viewport.height/1.6);
        	infoWinWidth = viewport.width
        	infoWinHeight = viewport.height/2.4;
        	// document.getElementById("infoWin").style.fontSize = "200%";
        }else if(viewport.width >= mobileWidth){
        	pxOffX = -310;
        	pxOffY = -160;
        	infoWinWidth = 280
        	infoWinHeight = infoWinWidth *0.8; //It is calculating height 
        }


        // console.log(toString(infoWinWidth) + "px");
        // console.log(infoWinWidth.toString() + "px");

        var myOptions = {
           content: infoWindowHtml
          ,pixelOffset: new google.maps.Size(pxOffX, pxOffY) //You can fix postion of info window
          ,boxStyle: { 
            width: infoWinWidth.toString() + "px"
            ,height: infoWinHeight.toString() + "px" //This is the width of the window.
           }
        };

        var ib = new InfoBox(myOptions);

        //Add icon click function
        marker.addListener("click", function () {
          ib.open(theMap, this);
        });

        ib.open(theMap, marker);

        theMap.panBy(pxOffX/2,pxOffY/2);
      }

Answer 1

        var myMapOptions = {
           zoom: 15
          ,center: secheltLoc
          ,mapTypeId: google.maps.MapTypeId.ROADMAP
          ,clickableIcons: false // これを追加
        };

　

clickableIcons

Type: boolean
When false, map icons are not clickable. A map icon represents a point of interest, also known as a POI. By default map icons are clickable.
Google Maps JavaScript API V3 Reference  |  Google Maps JavaScript API  |  Google Developers

Comments

[Tats.N]

ありがとうございました！助かります！