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

Answer 1

If you want the data without getting the InfoWindow HTML showing at all, you simply have to re-work the prototype of 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 2

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 3

Simply style the map to not show Points of Interest. This is simple and does not breach Google's terms of service.

eg

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

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

Answer 4

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

Answer 5

You can do this by creating a styled map without labels for the points of interest. This maintains the topography and other nice pieces of information on the map, but removes the markers.

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

map.setOptions({styles: remove_poi})

Answer 6

You could consider the following approach to disable POI Info Window:

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

Example

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>

The above example affects all the info windows, so if you need to disable only POI Info Window, then we could introduce flag to determine whether it is POI Info Window or not:

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

Example

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>