Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
425 views
in Technique[技术] by (71.8m points)

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

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:

Example

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

Example

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...