Можно ли удалить только всплывающие пузыри POI в Google Maps API v3?

Question

Итак, я работаю над новым веб-приложением, которое сосредоточено на картах. Используя Google Maps API v3 и действительно доволен этим, но заметил, что в точках интереса (POI) автоматически всплывают пузырьки с более подробной информацией и ссылкой на страницу Google Мест на карте. Я не хочу это. Вот мой код:

map = new google.maps.Map(document.getElementById("map"), {
    center:new google.maps.LatLng(default_latitude,default_longitude),
    zoom:11,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    panControl:false
});

Я знаю, что вы можете полностью удалить POI. Вот мой код для этого:

map = new google.maps.Map(document.getElementById("map"),{
    center:new google.maps.LatLng(default_latitude,default_longitude),
    zoom:11,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    panControl:false,
    styles:[{
        featureType:"poi",
        elementType:"labels",
        stylers:[{
            visibility:"off"
        }]
    }]
});

Это полностью удаляет все, и я все еще хотел бы видеть ярлыки, поскольку я думаю, что они приносят ценность, но просто думаю, что пузыри слишком отвлекают.

Для справки вот пузырь, который я хочу удалить:

А вот та же карта с полностью удаленными POI:

Answer 1

Примечание редактора: этот ответ был применим до версии 3.23.Начиная с версии 3.24, выпущенной в 2016 году, вы можете использовать опцию clickableIcons map. См. Ответ xomena .

Версия ~ 3.12 fix . Демо

Вот новый патч, который снова работает.Я протестировал его с версией 3.14.

Теперь мы собираемся исправить set() вместо open().

function fixInfoWindow() {
    // Here we redefine the set() method.
    // If it is called for map option, we hide the InfoWindow, if "noSuppress"  
    // option is not true. As Google Maps does not know about this option,  
    // its InfoWindows will not be opened.

    var set = google.maps.InfoWindow.prototype.set;

    google.maps.InfoWindow.prototype.set = function (key, val) {
        if (key === 'map' && ! this.get('noSuppress')) {
            console.warn('This InfoWindow is suppressed.');
            console.log('To enable it, set "noSuppress" option to true.');
            return;
        }

        set.apply(this, arguments);
    }
}

Что вам нужно сделать, это установить параметр noSuppress в true для своих InfoWindow, чтобы открыть их, например:

var popup = new google.maps.InfoWindow({
    content: 'Bang!',
    noSuppress: true
});

popup.setPosition(new google.maps.LatLng(-34.397, 150.644));

popup.open(map);

или:

var popup = new google.maps.InfoWindow({
    content: 'Bang!',
});

popup.set('noSuppress', true);
popup.setPosition(new google.maps.LatLng(-34.397, 150.644));

popup.open(map);

Answer 2

Начиная с версии 3.24, JavaScript API Карт имеет свойство clickableIcons в объекте MapOptions:

https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions

Это свойство можно использовать для отключения интерактивных значков на картах с помощьюустановка свойства clickableIcons в false.Также существует метод setClickableIcons ().

Пожалуйста, посмотрите на этот пример: http://jsbin.com/liyamecoqa/edit?html,output

Answer 3

Больше не работает, так как обновление API Карт Google.

Я наконец нашел его!

Вот демо:http://jsfiddle.net/fbDDZ/14/ (нажатие кнопки «открыть» или POI ничего не делает, нажатие кнопки «открыть, пожалуйста» открывает окно InfoWindow)

Идея заключается в исправлении файла InfoWindow.prototype.open, чтобы он мог принять третий аргумент.Google не передает его, но мы должны.

Код:

function fixInfoWindow() {
    var proto = google.maps.InfoWindow.prototype,
        open = proto.open;
    proto.open = function(map, anchor, please) {
        if (please) {
            return open.apply(this, arguments);
        }
    }
}

Google открывает InfoWindow по POI так:

myInfoWin.open(map, poiMarker)

Окно не открываетсяпотому что Google не сказал «пожалуйста».Вот как мы должны открывать наши информационные окна:

myInfoWin.open(map, poiMarker, true);

Answer 4

Найден обходной путь! Он довольно грязный, поэтому может прекратить работу, если Google что-то изменит, но это работает!

Вы должны найти слои, где Google размещает информационные окна для POI.К счастью, эти слои отличаются от слоев, используемых для пользователей infoWindows.Хитрость заключается в том, чтобы найти правильные слои.Слой теней можно легко найти, но слой infoWindow создается после создания некоторого информационного окна POI, поэтому вы должны прослушивать событие click на том же элементе div, что и Google.Затем вы находите слой информационного окна POI по z-индексу или URL-адресам изображений, но это не очень хорошо проверено ... Обратите внимание, что если Google изменит z-index, он перестанет работать ...

var lis = google.maps.event.addListener(my_map, 'tilesloaded', function () {

    $('*').filter(function () { return $(this).css('z-index') == 104 }).remove();
        // remove layer for POI infoWindow shadow - has z-index: 104

    var eventDiv = $(my_map.getDiv()).children().children()[0];
        // this div is used by google to handle events

    $(eventDiv).click(function clickHandler() {
        var timeout = 100;
        var attempts = 20;
        setTimeout(function timeoutHandler() {
            // there are 2 ways how to find POI infoWindow layer
            // 1st way - by the z-index
            var poiInfoLayer = $('*').filter(function () { 
                return $(this).css('z-index') == 169 || 
                       $(this).css('z-index') == 248 
            });
            // 2nd way - by the images :-)
            // but not tested much - it may also find normal infoWindows!
            //var poiInfoLayer = $('[src*="/mapfiles/iw3.png"]').parent().parent();

            if (poiInfoLayer.length) {
                    poiInfoLayer.remove();
                    $(eventDiv).unbind('click', clickHandler);
            }
            else {
                    if (attempts > 0) {
                            setTimeout(timeoutHandler, timeout);
                            attempts--;
                    }
            }

        }, timeout);
    });
    google.maps.event.removeListener(lis);
});

Answer 5

Редактировать: Хорошо, похоже, Google реализовал решение, посмотрите ответ xomena.

Хорошо, после поиска везде, похоже, что вы не можете просто отобразить POI с отключенным нажатием, вы можете посмотреть здесь для обсуждения:

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/f1ac9ad4da3606fe/3975bbda46904ae7?lnk=gst&q=disable+poi#3975bbda46904ae7

и этот обмен в частности:

---

Привет

Есть ли возможность сделать POI видимыми, но не нажимаемыми?

Спасибо Lorenzo

---

Крис Бродфут

К сожалению, не Лоренцо. Вам нужно будет применить стиль карты, чтобы скрыть метки poi:

[{featureType: "poi", elementType: "метки", стилисты: [{ visibility: "off"}]}]

(или просто скрыть бизнес-пуаз, "poi.business")

---

Это исходит от разработчиков Google Maps, поэтому вы не можете отключить всплывающее окно, только POI.

Answer 6

Я бы осмотрел элемент с помощью firebug и использовал бы display:none !important; для удаления этих стилей, если Google не позволяет вам получить к ним прямой доступ через API (что, я думаю, вы должны иметь)

Answer 7

Предлагаю вам посмотреть ответ, который я дал здесь: Как убрать маркеры по умолчанию?

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

var myOptions = {
    zoom: 10,
    center: homeLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: myStyles 
};