Posso remover apenas as bolhas pop-up dos POIs na API do Google Maps v3?

Então, estou trabalhando em um novo aplicativo da web que tem um grande foco nos mapas. Usando a API do Google Maps v3 e muito feliz com ela, percebemos que os pontos de interesse (POIs) têm bolhas automaticamente com mais detalhes e um link para a página do Google Places. Eu não quero isso. Aqui está o meu código:

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

Eu sei que você pode remover completamente o POI. Aqui está o meu código para isso:

 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" }] }] }); 

Isso remove tudo completamente e eu ainda gostaria de ver os labels, pois acho que eles trazem valor, mas acho que as bolhas são uma grande distração.

Para referência, aqui está a bolha que eu quero remover:

Exemplo

E aqui está o mesmo mapa com os POIs totalmente removidos:

Exemplo

Nota do editor: esta resposta foi aplicável até a versão 3.23. Desde a versão 3.24 lançada em 2016, você pode usar a opção de mapa clickableIcons . Veja a resposta de xomena .

Versão ~ 3.12 fix . Demonstração

Aqui está um novo patch que funciona novamente. Eu testei com a versão 3.14.

Agora vamos patch set() vez de 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); } } 

O que você precisa fazer é definir a opção noSuppress como true para o seu próprio InfoWindow para abri-las, por exemplo:

 var popup = new google.maps.InfoWindow({ content: 'Bang!', noSuppress: true }); popup.setPosition(new google.maps.LatLng(-34.397, 150.644)); popup.open(map); 

ou:

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

A partir da versão 3.24, a API JavaScript do Google Maps tem uma propriedade clickableIcons no object MapOptions:

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

Você pode usar essa propriedade para desativar os icons clicáveis ​​nos mapas definindo a propriedade clickableIcons como false. Também existe um método setClickableIcons ().

Por favor, olhe este exemplo: http://jsbin.com/liyamecoqa/edit?html,output

Encontrou uma solução alternativa! É bem sujo, então pode parar de funcionar se o google mudar alguma coisa, mas funciona!

Você tem que encontrar as camadas onde o google coloca o infoWindows para POIs. Felizmente, essas camadas são diferentes das camadas usadas pelos usuários do infoWindows. O truque é encontrar as camadas adequadas. A camada de sombra pode ser encontrada facilmente, mas a camada infoWindow é criada depois que alguma janela de informações do POI é criada, então você precisa ouvir o evento click na mesma div que o google. Então você encontra a camada POI infoWindow por z-index, ou por urls image mas isso não está bem testado … Note que se o google alterar o z-index, ele irá parar de funcionar …

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

Não funciona mais, desde a atualização da API do Google Maps.

Eu encontrei finalmente!

Aqui está a demo: http://jsfiddle.net/fbDDZ/14/ (clicando em “abrir” ou POI não faz nada, clicando em “abrir por favor” abre InfoWindow)

A idéia é corrigir o InfoWindow.prototype.open para permitir que ele aceite o terceiro argumento. O Google não passa, mas devemos.

O código:

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

O Google abre o InfoWindow no POI assim:

 myInfoWin.open(map, poiMarker) 

A janela não abre, porque o Google não disse “por favor”. É assim que devemos abrir nossas janelas de informações:

 myInfoWin.open(map, poiMarker, true); 

Edit: Ok, parece que o Google implementou uma solução, olhe para xomena resposta.

Ok, depois de pesquisar em todos os lugares, parece que você não pode simplesmente exibir os POIs clicando com o botão desativado. Você pode procurar mais discussões aqui:

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

e este intercâmbio em particular:


Oi,

Existe alguma possibilidade de tornar os POIs visíveis, mas não clicáveis?

Obrigado Lorenzo


Chris Broadfoot

Infelizmente não Lorenzo. Você precisará aplicar um estilo de mapa para ocultar os labels de poi:

[{featureType: “poi”, elementType: “labels”, estilizadores: [{visibility: “off”}]}]

(ou apenas esconder negócios pois, “poi.business”)


Isso vem dos desenvolvedores do Google Maps, o que significa que você não pode desativar o pop-up, apenas os POIs.

Eu inspecionaria o elemento usando o firebug e usaria display:none !important; remover esses estilos se o Google não permitir que você os acesse diretamente por meio da API (o que eu acho que você deve conseguir)

Sugiro que você veja a resposta que eu dei aqui: Como remover marcadores padrão?

 var myStyles =[ { featureType: "poi", elementType: "labels", stylers: [ { visibility: "off" } ] } ]; var myOptions = { zoom: 10, center: homeLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: myStyles };