Can I remove just the popup bubbles of POI's in Google Maps API v3?

Question

So I\'m working on a new web app that has a big focus on maps. Using Google Maps API v3 and really happy with it but noticed that the points of interest (POI\'s) have autom

Answer 1

Suggest you look at the answer I gave here: How do I remove default markers?

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

var myOptions = {
    zoom: 10,
    center: homeLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: myStyles 
};

Answer 2

No longer works, since update of Google Maps API.

I've found it finally!

Here is the demo: http://jsfiddle.net/fbDDZ/14/ (clicking "open" or POI does nothing, clicking "open please" opens InfoWindow)

The idea is to patch InfoWindow.prototype.open so to allow it accept the third argument. Google does not pass it, but we should.

The code:

function fixInfoWindow() {
    var proto = google.maps.InfoWindow.prototype,
        open = proto.open;
    proto.open = function(map, anchor, please) {
        if (please) {
            return open.apply(this, arguments);
        }
    }
}

Google opens InfoWindow on POI like that:

myInfoWin.open(map, poiMarker)

The window will not open, because Google didnt say "please". That is how we should open our info windows:

myInfoWin.open(map, poiMarker, true);

Answer 3

I would inspect element using firebug and use display:none !important; to remove these styles if Google does not allow you to access them directly via the API (which I would think you should be able to)

Answer 4

Found a workaround! It's pretty dirty so it might stop work if google changes something, but it works!

You have to find the layers where google puts the infoWindows for POIs. Fortunatelly these layers are different from the layers used for users infoWindows. The trick is to find the proper layers. The shadow layer can be found easily, but the infoWindow layer is created after some POI infoWindow is created, so you have to listener to the click event on the same div as google does. Then you find the POI infoWindow layer by z-index, or by image urls but this is not well tested... Note that if google changes the z-index, it will stop work...

var lis = google.maps.event.addListener(my_map, 'tilesloaded', function () {

    $('*').filter(function () { return $(this).css('z-index') == 104 }).remove();
        // remove layer for POI infoWindow shadow - has z-index: 104

    var eventDiv = $(my_map.getDiv()).children().children()[0];
        // this div is used by google to handle events

    $(eventDiv).click(function clickHandler() {
        var timeout = 100;
        var attempts = 20;
        setTimeout(function timeoutHandler() {
            // there are 2 ways how to find POI infoWindow layer
            // 1st way - by the z-index
            var poiInfoLayer = $('*').filter(function () { 
                return $(this).css('z-index') == 169 || 
                       $(this).css('z-index') == 248 
            });
            // 2nd way - by the images :-)
            // but not tested much - it may also find normal infoWindows!
            //var poiInfoLayer = $('[src*="/mapfiles/iw3.png"]').parent().parent();

            if (poiInfoLayer.length) {
                    poiInfoLayer.remove();
                    $(eventDiv).unbind('click', clickHandler);
            }
            else {
                    if (attempts > 0) {
                            setTimeout(timeoutHandler, timeout);
                            attempts--;
                    }
            }

        }, timeout);
    });
    google.maps.event.removeListener(lis);
});

Answer 5

Editor's note: this answer was applicable until version 3.23. Since version 3.24 released in 2016, you can use clickableIcons map option. See xomena's answer.

Version ~3.12 fix. Demo

Here is a new patch that works again. I have tested it with version 3.14.

Now we gonna patch set() instead of open().

function fixInfoWindow() {
    // Here we redefine the set() method.
    // If it is called for map option, we hide the InfoWindow, if "noSuppress"  
    // option is not true. As Google Maps does not know about this option,  
    // its InfoWindows will not be opened.

    var set = google.maps.InfoWindow.prototype.set;

    google.maps.InfoWindow.prototype.set = function (key, val) {
        if (key === 'map' && ! this.get('noSuppress')) {
            console.warn('This InfoWindow is suppressed.');
            console.log('To enable it, set "noSuppress" option to true.');
            return;
        }

        set.apply(this, arguments);
    }
}

What you have to do is set option noSuppress to true for your own InfoWindow's in order to open them, for example:

var popup = new google.maps.InfoWindow({
    content: 'Bang!',
    noSuppress: true
});

popup.setPosition(new google.maps.LatLng(-34.397, 150.644));

popup.open(map);

or:

var popup = new google.maps.InfoWindow({
    content: 'Bang!',
});

popup.set('noSuppress', true);
popup.setPosition(new google.maps.LatLng(-34.397, 150.644));

popup.open(map);

Answer 6

Edit: Ok, looks like Google implemented a solution, look at xomena answer.

Ok, after searching everywhere it looks like you can't just display the POIs with clicking disabled, you could look here for more discussions:

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/f1ac9ad4da3606fe/3975bbda46904ae7?lnk=gst&q=disable+poi#3975bbda46904ae7

and this exchange in particular:

---

Hi,

Is there any possibilltiy to make POIs visible but not clickable?

Thanks Lorenzo

---

Chris Broadfoot

Unfortunately not Lorenzo. You'll need to apply a map style to hide poi labels:

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

(or to just hide business pois, "poi.business")

---

This comes from Google Maps developers, so means you can't disable the popup, just the POIs.