Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Обновить

Отображение <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

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

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

Вы не можете ! Нет никакого способа сделать это в текущих опциях InfoWindow v3.13.

Обходной путь должен отключить изображение, содержащее 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> на карте.

Ответ 2

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

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

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

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

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

Ответ 7

closeBoxURL: ""

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

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

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

И как сказал davidkonrad. Это обходное решение для кода, как и сегодня. Вероятно, это будет изменено.

Ответ 8

Мой собственный способ (без 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');

Ответ 9

Мое решение:

            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);
        });

Ответ 10

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

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

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

Ответ 11

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

Ответ 12

Я не мог получить ответы на $(".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
);

Ответ 13

Используя метод лучников, мне нужно сделать

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

Ответ 14

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, вам необходимо найти элемент, настроив его на окно содержимого и удалить его.

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

Ответ 15

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

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

Ответ 16

Это работает

.gm-style-iw > button {display: none !important;}

Ответ 17

=============  HTML  ==============
<agm-map #gm [latitude]="lat" [longitude]="lng" #AgmMap [fitBounds]="true">
 <agm-marker
          (mouseOver)="onMouseOver(infoWindow, gm)"
          (mouseOut)="onMouseOut(infoWindow, gm)"
        >

         <div id="test">
            <agm-info-window #infoWindow></agm-info-window>
          </div>
        </agm-marker>
      </agm-map>

=============  TS  ==============

onMouseOver(infoWindow, gm) {
console.log(infoWindow);
if (gm.lastOpen != null) {
 gm.lastOpen.close();
}
gm.lastOpen = infoWindow;
infoWindow.open();
setTimeout(() => {
  var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
}, 10);
}
onMouseOut(infoWindow, gm) {
gm.lastOpen = infoWindow;
// infoWindow.close();

}

Ответ 18

в плагине jQuery gmap3 это можно выполнить с помощью

google.maps.event.addListener($('#map').gmap3({get:{name:"infowindow"}}), 'domready', function(){
    $(".gm-style-iw").next("div").remove();
});

Ответ 19

Осмотрите его - это div с закрытым классом - вы можете настроить его с помощью CSS и установить его на display: none;

Ответ 20

Вы можете просто использовать опцию

closeBoxURL : ""

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html

Из документации Google

closeBoxURL | string | URL-адрес изображения, представляющего окно закрытия. Примечание. По умолчанию используется URL-адрес стандартной рамки Google. Задавать это свойство для "", если закрытие не требуется.

Пример

   var infowindow = new google.maps.InfoWindow({
                          closeBoxURL: "",
                          closeBoxMargin : ""

                        });

Ответ 21

Вы можете установить для свойства "closeBoxURL" окна "Информация" значение "", и это приведет к исчезновению кнопки.

var infowindow = new google.maps.InfoWindow({
    content: contentString,
    closeBoxURL: ""
});