Google maps 使用谷歌地图API v3禁用兴趣点信息窗口

我有一个带有信息气泡和自定义标记的自定义地图。当我放大到诸如公园和大学之类的兴趣点时，当我单击时，将打开一个信息窗口。如何禁用信息窗口

我的代码如下：

var geocoder;
var map;
var infoBubble;
var dropdown = "";
var gmarkers = [];

var hostel_icon = new google.maps.MarkerImage('/resources/hostel_blue_icon.png',
new google.maps.Size(28,32),
new google.maps.Point(0,0),
new google.maps.Point(14,32));

var bar_icon = new google.maps.MarkerImage('/resources/bar_red_icon.png',
new google.maps.Size(28,32),
new google.maps.Point(0,0),
new google.maps.Point(14,32));

var icon_shadow = new google.maps.MarkerImage('/resources/myicon_shadow.png',
new google.maps.Size(45,32),
new google.maps.Point(0,0),
new google.maps.Point(12,32));

var customIcons = {
    hostel: {
        icon: hostel_icon,
        shadow: icon_shadow
    },
    bar: {
        icon: bar_icon,
        shadow: icon_shadow
    }
};

function initialize() {
    var latlng = new google.maps.LatLng(12.82364, 26.29987);
    var myMapOptions = {
        zoom: 2,
        center: latlng,
        panControl: false,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR},
        navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT}
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

    infoBubble = new InfoBubble({
        shadowStyle: 0,
        padding: 0,
        backgroundColor: 'rgb(57,57,57)',
        borderRadius: 5,
        arrowSize: 10,
        borderWidth: 1,
        maxWidth: 400,
        borderColor: '#2c2c2c',
        disableAutoPan: false,
        hideCloseButton: true,
        arrowPosition: 50,
        backgroundClassName: 'phoney',
        arrowStyle: 0
    });

    // Change this depending on the name of your PHP file
    downloadUrl("phpsqlajax_genxml_2.php", function(data) {
        var xml = parseXml(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var bar_name = markers[i].getAttribute("bar_name");
            var hostel_name = markers[i].getAttribute("hostel_name");
            var street = markers[i].getAttribute("street");
            var city = markers[i].getAttribute("city");
            var postcode = markers[i].getAttribute("postcode");
            var country = markers[i].getAttribute("country");
            var page = markers[i].getAttribute("page");
            var map_photo = markers[i].getAttribute("map_photo");
            var type = markers[i].getAttribute("type");
            var category = markers[i].getAttribute("category");
            var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));

            var html = '<div class="infowindow"><div class="iwPhoto" style="width: 105px; height: 65px;">' + "<a href='" + page + "'><img src='" + map_photo + "' alt=''/></a>" + '</div><div class="iwName" style="height: 24px;">' + "<a href='" + page + "'>" + hostel_name + "</a>" + '</div><div class="iwCategory" style="height: 15px;">' + category + '</div><div class="iwCity" style="height: 29px;">' + "<a href='" + page + "'>" + city + "</a>" + '<div class="iwArrow" style="width: 29px; height: 29px;">' + "<a href='" + page + "'><img src='/resources/arrow.png'/></a>" + '</div></div></div>';

            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow,
                title: bar_name
            });
            marker.bar_name = bar_name;
            marker.category = category;
            bindInfoBubble(marker, map, infoBubble, html, bar_name);

            gmarkers.push(marker);

            str = '<option selected> - Select a club - </option>';
            for (j=0; j < gmarkers.length; j++){
                str += '<option value="'+gmarkers[j].bar_name+'">'+gmarkers[j].bar_name+', '+gmarkers[j].category+'</option>';
            }
            var str1 ='<form name="form_city" action=""><select style="width:150px;" id="select_city" name="select_cityUrl" onchange="handleSelected(this);">';
            var str2 ='</select></form>';
            dropdown = str1 + str + str2;
        }
        document.getElementById("dd").innerHTML = dropdown;
    });
}

function handleSelected(opt) {
    var indexNo = opt[opt.selectedIndex].index;
    google.maps.event.trigger(gmarkers[indexNo-1], "click");
}

function bindInfoBubble(marker, map, infoBubble, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infoBubble.setContent(html);
        infoBubble.open(map, marker);
        google.maps.event.addListener(map, "click", function () {
            infoBubble.close();
        });
    });
}

function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
                  new ActiveXObject('Microsoft.XMLHTTP') :
                  new XMLHttpRequest;

    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request.responseText, request.status);
        }
    };

    request.open('GET', url, true);
    request.send(null);
}

function parseXml(str) {
    if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
    } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
    }
}

function doNothing() {}

var地理编码器；
var映射；
var信息泡沫；
var下拉列表=”；
var gmarkers=[]；
var hostel_icon=new google.maps.MarkerImage（'/resources/hostel_blue_icon.png'，
新谷歌地图大小（28,32），
新google.maps.Point（0,0），
新google.maps.Point（14,32））；
var bar_icon=new google.maps.MarkerImage（'/resources/bar_red_icon.png'，
新谷歌地图大小（28,32），
新google.maps.Point（0,0），
新google.maps.Point（14,32））；
var icon_shadow=new google.maps.MarkerImage（'/resources/myicon_shadow.png'，
新谷歌地图尺寸（45,32），
新google.maps.Point（0,0），
新google.maps.Point（12,32））；
var customIcons={
宿舍：{
图标：旅馆图标，
阴影：图标\u阴影
},
酒吧：{
图标：bar_图标，
阴影：图标\u阴影
}
};
函数初始化（）{
var latlng=新的google.maps.latlng（12.82364,26.29987）；
var myMapOptions={
缩放：2，
中心：拉特林，
泛控制：错误，
scaleControl：对，
mapTypeId:google.maps.mapTypeId.TERRAIN，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.HORIZONTAL_BAR}，
navigationControlOptions:{style:google.maps.NavigationControlStyle.DEFAULT}
}
map=new google.maps.map（document.getElementById（“map_canvas”）、myMapOptions）；
infoBubble=新的infoBubble({
阴影样式：0，
填充：0，
背景颜色：“rgb（57,57,57）”，
边界半径：5，
箭头尺寸：10，
边框宽度：1，
最大宽度：400，
边框颜色：“#2c2c”，
disableAutoPan:错，
hideCloseButton:正确，
箭头位置：50，
backgroundClassName:'假'，
箭头样式：0
});
//根据PHP文件的名称更改此选项
下载URL（“phpsqlajax_genxml_2.php”），函数（数据）{
var xml=parseXml（数据）；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i

有关可单击的：错误答案，请参见其他答案

但是，如果希望它可单击，但没有信息窗口，请在

事件上调用
stop（）
，以防止信息窗口显示，但仍然可以获取位置信息：

map.addListener('click', function (event) {
  // If the event is a POI
  if (event.placeId) {

    // Call event.stop() on the event to prevent the default info window from showing.
    event.stop();

    // do any other stuff you want to do
    console.log('You clicked on place:' + event.placeId + ', location: ' + event.latLng);
  }
}

有关详细信息，请参阅


其他选项：完全删除POI图标，而不仅仅是信息窗口：

var mapOptions = {
  styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}]
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

google.maps.InfoWindow.prototype.open = function () {
  return this; //prevent InfoWindow to appear
}
google.maps.InfoWindow.prototype.setContent = function (content) {
  if (content.querySelector) {
    var addressHTML = content.querySelector('.address');
    var address = addressHTML.innerHTML.replace(/<[^>]*>/g, ' ').trim();
    var link = content.querySelector('a').getAttribute('href');
    var payload = {
      header: 'event',
      eventName: 'place_picked',
      data: {
        name: content.querySelector('.title').innerHTML.trim(),
        address: address,
        link: link
      }
    };
    console.log('emit your event/call your function', payload);
  }
};

只需将地图样式设置为不显示感兴趣的点。这很简单，并不违反谷歌的服务条款

乙二醇

可以通过创建没有兴趣点标签的样式化地图来实现这一点。
这会在地图上保留地形和其他漂亮的信息，但会删除标记

  var remove_poi = [
    {
      "featureType": "poi",
      "elementType": "labels",
      "stylers": [
        { "visibility": "off" }
      ]
    }
  ]

map.setOptions({styles: remove_poi})

您可以考虑以下方法禁用POI信息窗口：
示例


函数
function disablePOIInfoWindow(){
    var fnSet = google.maps.InfoWindow.prototype.set;
    google.maps.InfoWindow.prototype.set = function () {
    };
}

function initialize() {
    var myMapOptions = { clickableIcons: false }
}

google.maps.InfoWindow.prototype.open = function () {
  return this; //prevent InfoWindow to appear
}
google.maps.InfoWindow.prototype.setContent = function (content) {
  if (content.querySelector) {
    var addressHTML = content.querySelector('.address');
    var address = addressHTML.innerHTML.replace(/<[^>]*>/g, ' ').trim();
    var link = content.querySelector('a').getAttribute('href');
    var payload = {
      header: 'event',
      eventName: 'place_picked',
      data: {
        name: content.querySelector('.title').innerHTML.trim(),
        address: address,
        link: link
      }
    };
    console.log('emit your event/call your function', payload);
  }
};

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), myOptions);
    var clickHandler = new ClickEventHandler(map, origin);
}


var ClickEventHandler = function (map, origin) {
    this.origin = origin;
    this.map = map;
    this.map.addListener('click', this.handleClick.bind(this));
};

ClickEventHandler.prototype.handleClick = function (event) {
    //console.log('You clicked on: ' + event.latLng);
    if (event.placeId) {
        //console.log('You clicked on place:' + event.placeId);
        // Calling e.stop() on the event prevents the default info window from
        // showing.
        // If you call stop here when there is no placeId you will prevent some
        // other map click event handlers from receiving the event.
        event.stop();

    }
}