it-swarm.com.ru

GMaps V3 InfoWindow - отключить кнопку закрытия "x"

Из того, что я вижу, в v2 API GMaps было свойство «кнопки» объекта InfoWindow, которое можно было бы определить таким образом, чтобы у данного InfoWindow не было кнопки закрытия:

marker.openInfoWindowHtml("No Close Button",{buttons:{close:{show:4}}});

Выше, однако, не относится к v3. Кто-нибудь знает способ сделать это? Я читал об утилите, которая заменяет InfoWindow с именем InfoBox , но она не была разработана в течение последних 2 лет. В настоящее время я использую последнюю версию 3.13 Gmaps v3 API.

Обходной путь с jQuery приемлем, если нет лучшего решения.

39
ddinchev

Обновление

Отображение <div> поверх карты Google просто:

пример CSS 

div.info {
    position: absolute;
    z-index: 999;
    width: 200px;
    height: 100px;
    display: none;
    background-color: #fff;
    border: 3px solid #ebebeb;
    padding: 10px;
}

info класс <div> где-то в разметке:

<div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div>

Всегда приятно иметь краткую ссылку на div:

var info = document.getElementById('myinfo');

Более сложная часть, показывающая <div>, как и когда - здесь я просто назначаю обработчик щелчков карте (после его создания) и показываю информацию <div> в месте расположения мыши XY внутри карты:

google.maps.event.addListener(map, 'click', function(args) {
  var x=args.pixel.x; //we clicked here
  var y=args.pixel.y;

  info.style.left=x+'px';
  info.style.top=y+'px';
  info.style.display='block';
});

Что вы получаете с этим, так это то, что информация <div> следует за вами по карте каждый раз, когда вы нажимаете. 

enter image description here

  • Вам понадобится больше стиля, чтобы он соответствовал вашим потребностям, например, чтобы он «выглядел как информационный блок», но это должно быть легко узнать, я не библиотекарь :)
  • И, может быть, позже что-нибудь, чтобы закрыть информацию, но что вы не хотели в первую очередь :)

Оригинальный ответ

Вы не можете! Нет способа сделать это в текущей версии 3.13 Параметры InfoWindow

Обходной путь должен отключить изображение, содержащее X:

<style>
img[src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"] {
    display: none;
}
</style>

enter image description here

Но это в никак желательно!

src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png - это то, что информационное окно ссылается на сегодня. Завтра, или через месяц, или через год эта ссылка на изображение наверняка изменится. Как вы можете видеть, если вы ищете похожие «решения», сделанные со временем - как это . Они все сломаны сегодня, например, усилия не имеют смысла.

Я думаю, что в Google очень хорошая логика "отказываться" следовать запросу на скрытие кнопки закрытия. Если вам не нужна кнопка закрытия, зачем вам вообще нужно InfoWindow? Когда вам лучше просто показать <div> на карте. 

19
davidkonrad

Вы также можете сделать это через CSS.

.gm-style-iw + div {display: none;}

редактировать январь 2019
как сказал @antmeehan в комментарии, 

Google изменил HTML, и кнопка закрытия теперь является элементом кнопки, а не элементом div

Таким образом, код CSS, чтобы скрыть кнопку «х» теперь:

.gm-style-iw + button {display: none;}
35
Louis Moore

если вы используете jquery, просто добавьте это

$(".gm-style-iw").next("div").hide();
16
Tushar Gaurav

Чтобы расширить ответ Луи Мура , вы также можете отцентрировать текст после удаления кнопки закрытия:

.gm-style-iw + div {display: none;}
.gm-style-iw {text-align:center;}

Без центрирования:

С Центрированием:

14
phi

Спасибо Тушар, но также вам нужно поместить этот код в обработчик событий

google.maps.event.addListener(infowindow, 'domready', function(){
    $(".gm-style-iw").next("div").hide();
});
    

12
CarryLight

Я использовал ответ Тушара Гаурава, но немного расширил его ...

$(".gm-style-iw:contains(" + infoText + ")").css("left", function() {
    return ($(this).parent().width() - $(this).width()) / 2;
}).next("div").remove();

Это удалит X из информационного окна с текстом в infoText, а затем повторно центрирует текст, поскольку он смещен от центра после удаления кнопки закрытия.

Просто добавлю это для всех, кто наткнулся на эту страницу, как я.

7
Archer
closeBoxURL: ""

как указано выше, не применяется для InfoWIndow . Это опция в InfoBox

Например, вы можете использовать этот обходной путь CSS, чтобы удалить X и окружающую нажимаемую кнопку:

.gm-style-iw + div {
  display: none;
}

И как Давидконрад сказал. Это обходной путь в коде, как сегодня. Это, вероятно, будет изменено.

6
tmn

Мой собственный путь (без Jquery) и с выравниванием по центру информационного окна:

var content = document.querySelector('.gm-style-iw');
content.parentNode.removeChild(content.nextElementSibling);
content.style.setProperty('width', 'auto', 'important');
content.style.setProperty('right', content.style.left, 'important');
content.style.setProperty('text-align', 'center', 'important');
4
alex

Мое решение:

            google.maps.event.addListener(marker, 'click', function() {

            var wnd = new google.maps.InfoWindow({
                content: "<table id='viewObject' >...</table>"
            });

            google.maps.event.addListener(wnd, 'domready', function(){

                $("#viewObject").parent().parent().next().remove();
            });

            wnd.open(map, marker);
        });
2
nim

Вы можете использовать это. Это не скроет другие изображения, такие как управление масштабированием, управление панорамированием и т.д В окне с информацией, вы можете использовать это.

google.maps.event.addListener(infoWindow, 'domready', function () {

      document.querySelector(".gm-style-iw").nextElementSibling.style.display = "none";
});
1
Bipool

.gm-style-iw + button {display: none! важный;}

0
user3760553

Используя метод Archers мне нужно сделать

$(".gm-style-iw").css("left", function() { //remove close and recenter
  return ($(this).parent().width() - $(this).find(">:first-child").width()) / 2;
}).next("div").remove();
0
zevero

Я не могу найти правильный ответ здесь, поэтому я исправил это сам. Это будет хорошо работать.

google.maps.event.addListener(infowindow, 'domready', function(){
      $(".gm-style-iw").parent().find("button").removeAttr("style").hide();
});
0
Michael Lee
google.maps.event.addListener(infowindow, 'domready', function() {

    var iwOuter = jQuery('.gm-style-iw');

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.remove()
});

Поскольку нет возможности скрыть это по параметру API, вы должны найти элемент, настроив таргетинг на окно контента и удалив его.

Надеюсь это поможет :)

0
dipak_pusti

Я не смог заставить работать ни один из ответов $(".gm-style-iw").next("div").hide(); даже при вызове кода после загрузки DOM, поскольку между вызываемым кодом и созданным информационным окном была задержка. Я создал интервал, который запускается до тех пор, пока он не найдет информационное окно и не удалит элемент «X». Если есть лучший способ, пожалуйста, скажите мне.

var removeCloseButton = setInterval(
    function()
    {
        if ($(".gm-style-iw").length)
        {
            $(".gm-style-iw").next("div").remove();
            clearInterval(removeCloseButton);
        }
    },
    10
);
0
Gavin