Отключить окно информации о достопримечательностях с помощью Google Maps API v3

Question

У меня есть пользовательская карта с информационным пузырем и пользовательскими маркерами.Когда я увеличиваю масштаб, например, появляются парки и университеты, и когда я нажимаю, открывается информационное окно.Как отключить информационное окно?

Мой код выглядит следующим образом:

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() {}

Answer 1

ОБНОВЛЕНИЕ Google Maps JavaScript API V3

Вы можете установить для clickableIcons значение false в MapOptions. Это сохранит значки POI, но отключит информационные окна так, как вы хотите.

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

Подробнее здесь ...

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

Answer 2

См. Другие ответы для кликабельного: ложный ответ.

Однако, если вы хотите, чтобы он был активным, но без информационного окна , вызовите stop() на event, чтобы предотвратить отображение информационного окна, но при этом получить информацию о местоположении:

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

Answer 3

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

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

map.setOptions({styles: remove_poi})

Answer 4

Можно рассмотреть следующий подход к отключению информационного окна POI :

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

Пример

function initMap() {
    var latlng = new google.maps.LatLng(40.713638, -74.005529);
    var myOptions = {
        zoom: 17,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    disablePOIInfoWindow();  
}

function disablePOIInfoWindow(){
    var fnSet = google.maps.InfoWindow.prototype.set;
    google.maps.InfoWindow.prototype.set = function () {
       alert('Ok');
    };
}


google.maps.event.addDomListener(window, 'load', initMap);

html, body {
   height: 100%;
   margin: 0;
   padding: 0;
}

#map_canvas {
   height: 100%;
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>

Приведенный выше пример влияет на все информационные окна, поэтому, если вам нужно отключить только информационное окно POI, мы можем ввести флаг, чтобы определить, является ли это информационное окно POI или нет:

function disablePOIInfoWindow(){
    var fnSet = google.maps.InfoWindow.prototype.set;
    google.maps.InfoWindow.prototype.set = function () {
        if(this.get('isCustomInfoWindow'))
           fnSet.apply(this, arguments);
    };
}

Пример * ** тысяча двадцать-один * тысяча двадцать два function initMap() { var latlng = new google.maps.LatLng(40.713638, -74.005529); var myOptions = { zoom: 17, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var infowindow = new google.maps.InfoWindow({ content: '' }); infowindow.set('isCustomInfoWindow',true); var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); disablePOIInfoWindow(); google.maps.event.addListener(map, 'click', function (event) { infowindow.setContent(event.latLng.lat() + "," + event.latLng.lng()); infowindow.setPosition(event.latLng); infowindow.open(map, this); }); } function disablePOIInfoWindow(){ var fnSet = google.maps.InfoWindow.prototype.set; google.maps.InfoWindow.prototype.set = function () { if(this.get('isCustomInfoWindow')) fnSet.apply(this, arguments); }; } //google.maps.event.addDomListener(window, 'load', initMap); html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; } <div id="map_canvas"></div> <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

Answer 5

Просто стилизуйте карту, чтобы не показывать достопримечательности.Это просто и не нарушает условия обслуживания Google.

например

mapOpts = {
  styles: [
    {
      featureType: "poi",
      stylers: [
         visibility: "off"
      ]
    }
  ]
};

$("#my-map").gmap(mapOpts).on("init", function(evt, map){
  // do stuff with the initialised map
});

Answer 6

Мы можем сделать это, обрабатывая клики на POI, Google API предоставил способ обнаружения кликов на POI в соответствии с этой статьей

На основе статьи выше Вот более простая версиякод, который можно использовать для остановки кликов на POI

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

    }
}

Answer 7

Если вы хотите, чтобы данные вообще не отображались в HTML-окне InfoWindow, вам просто нужно заново обработать прототип google.maps.InfoWindow:

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