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

Brendon picture Brendon · Sep 20, 2011 · Viewed 31.3k times · Source

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

Gavin picture Gavin · May 7, 2016

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