style - Deshabilite la ventana de información de punto de interés utilizando Google Maps API v3

marcar puntos en google maps api

Question

Tengo un mapa personalizado con una burbuja de información y marcadores personalizados. Cuando hago zoom en puntos de interés como parques y universidades aparecen y cuando hago clic en se abre una ventana de información. ¿Cómo desactivo la ventana de información?

Mi código es el siguiente:

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

Podemos hacerlo manejando los clics en poi, Google api ha proporcionado una forma de detectar los clics en POI según este artículo

Basado en el artículo anterior Aquí hay una versión más simple del código que se puede usar para detener los clics en 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 2

Podría considerar el siguiente enfoque para deshabilitar la Ventana de información de PDI :

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

Ejemplo

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>

El ejemplo anterior afecta a todas las ventanas de información, por lo que si necesita deshabilitar solo la ventana de información de PDI, entonces podríamos introducir un indicador para determinar si es la ventana de información de PDI o no:

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

Ejemplo

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 3

Puede hacerlo creando un mapa con estilo sin etiquetas para los puntos de interés. Esto mantiene la topografía y otras buenas piezas de información en el mapa, pero elimina los marcadores.

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

map.setOptions({styles: remove_poi})

Answer 4

Si quiere los datos sin mostrar el HTML de InfoWindow, simplemente tiene que volver a trabajar el prototipo de 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);
  }
};

Answer 5

Simplemente, diseña el mapa para que no muestre Puntos de interés. Esto es simple y no infringe los términos de servicio de Google.

p.ej

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

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

Answer 6

Vea las otras respuestas para hacer clic: respuesta falsa.

Sin embargo, si desea que se pueda hacer clic en él , pero no en una ventana de información , llame a stop() en el event para evitar que se muestre la ventana de información, pero aun así obtenga la información de ubicación:

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

Para obtener más información, vea los documentos .

Otra opción: eliminar completamente los iconos de POI, y no solo la ventana de información:

var mapOptions = {
  styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}]
};
var map = new google.maps.Map(document.getElementById(''map-canvas''),
    mapOptions);

Answer 7

ACTUALIZAR Google Maps JavaScript API V3

Puede establecer clickableIcons en falso en MapOptions. Esto mantendrá los iconos de POI pero desactivará las ventanas de información tal como lo desea.

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

Más detalles aquí ...

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