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 automatically bubbles with more details and a link to the Google Places page. I don't want these. Here is my code:

map = new google.maps.Map(document.getElementById("map"), {
    center:new google.maps.LatLng(default_latitude,default_longitude),
    zoom:11,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    panControl:false
});

I know you can remove the POI's entirely. Here is my code for that:

map = new google.maps.Map(document.getElementById("map"),{
    center:new google.maps.LatLng(default_latitude,default_longitude),
    zoom:11,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    panControl:false,
    styles:[{
        featureType:"poi",
        elementType:"labels",
        stylers:[{
            visibility:"off"
        }]
    }]
});

This removes everything entirely and I still would like to see the labels as I think they bring value but just think the bubbles are too much of a distraction.

For reference here is the bubble I want to remove:

And here is the same map with POI's removed entirely:

Answer 1

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 2

Starting from version 3.24 the Maps JavaScript API has a property clickableIcons in MapOptions object:

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

You can use this property to turn off clickable icons on maps by setting the clickableIcons property to false. Also exists a setClickableIcons() method.

Please look at this example: http://jsbin.com/liyamecoqa/edit?html,output

Answer 3

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

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.

Answer 6

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 7

Right, to sum up, if you want to "remove" popups, you can just use:

clickableIcons: false

for map options object. But if you want to have a popup, but without "View on Google Maps" label, you can use a hacky CSS trick:

google-map {
  .view-link {
    display: none !important;
  }
}

That was my requirements, and it works!

If you want to define which icons/pins (elements or labels, however you call it) should be visible, you can use this site to generate proper JSON with map settings: https://mapstyle.withgoogle.com/

Answer 8

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