Disable point-of-interest information window using Google Maps API v3

Question

I have a custom map with an information bubble and custom markers. When I zoom into points of interest such as parks and universities appear and when I click an information window opens. How do I disable the info window?

My code is as follows:

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

UPDATE Google Maps JavaScript API V3

You can set clickableIcons to false in MapOptions. This will keep the POI icons but disable the infowindows just as you want.

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

Further details here...

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

Answer 2

See the other answers for the clickable: false answer.

However, if you want it clickable, but no infowindow, call stop() on the event to prevent the infowindow from showing, but still get the location info:

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

For more info, see the docs.

---

Other option: completely remove the POI-icons, and not only the infoWindow:

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