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

Итак, я работаю над новым веб-приложением, которое фокусируется на картах. Используя API Карт Google 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"
        }]
    }]
});

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

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

Example

И вот та же самая карта с POI полностью удалена:

Example

Ответ 1

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

Версия ~ 3.12 исправить. Демо

Вот новый патч, который работает снова. Я протестировал его с версией 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);

Ответ 2

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

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

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

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

Ответ 3

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

Вы должны найти слои, где google помещает infoWindows для POI. Вплоть до этого эти слои отличаются от слоев, используемых для пользователей infoWindows. Трюк состоит в том, чтобы найти правильные слои. Теневой слой можно найти легко, но слой infoWindow создается после создания некоторого POI infoWindow, поэтому вы должны прослушивать событие click в том же div, что и в google. Затем вы обнаружите слой POI infoWindow с помощью z-index или по 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);
});

Ответ 4

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

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

Вот демо: http://jsfiddle.net/fbDDZ/14/ (нажатие "open" или POI ничего не делает, нажатие "open please" открывает 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);

Ответ 5

Изменить: Хорошо, похоже, что Google внедрил решение, посмотрите на ответ на xony.

Хорошо, после поиска везде, похоже, вы не можете просто отображать 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: "labels", stylers: [{ видимость: "выключено" }]}]

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


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

Ответ 6

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

Ответ 7

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

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

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