Posso rimuovere solo le bolle popup dei PDI in Google Maps API v3?

Quindi sto lavorando a una nuova app Web che ha un grande focus sulle mappe. Utilizzo dell’API di Google Maps v3 e sono davvero soddisfatto, ma ho notato che i punti di interesse (PDI) presentano automaticamente bolle con più dettagli e un link alla pagina di Google Places. Non voglio questi. Ecco il mio codice:

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

So che puoi rimuovere completamente i POI. Ecco il mio codice per questo:

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

Questo rimuove tutto completamente e mi piacerebbe ancora vedere le etichette come penso che apportino valore, ma pensate che le bolle siano troppo distrazioni.

Per riferimento qui è la bolla che voglio rimuovere:

Esempio

E qui c’è la stessa mappa con i POI completamente rimossi:

Esempio

Nota del redattore: questa risposta era applicabile fino alla versione 3.23. Dalla versione 3.24 rilasciata nel 2016, è ansible utilizzare l’opzione della mappa clickableIcons . Vedi la risposta di xomena .

Correzione della versione ~ 3.12 . dimostrazione

Ecco una nuova patch che funziona di nuovo. L’ho provato con la versione 3.14.

Ora applicheremo patch set() invece di 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); } } 

Quello che devi fare è impostare l’opzione noSuppress su true per le tue InfoWindow personali per aprirle, ad esempio:

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

o:

 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 partire dalla versione 3.24 l’API JavaScript di Maps ha una proprietà clickableIcons nell’object MapOptions:

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

Puoi utilizzare questa proprietà per distriggersre le icone selezionabili sulle mappe impostando la proprietà clickableIcons su false. Esiste anche un metodo setClickableIcons ().

Guarda questo esempio: http://jsbin.com/liyamecoqa/edit?html,output

Trovato una soluzione! È piuttosto sporco, quindi potrebbe smettere di funzionare se Google cambia qualcosa, ma funziona!

Devi trovare i livelli in cui Google inserisce InfoWindows per i POI. Fortunatamente questi strati sono diversi dagli strati usati per gli utenti di InfoWindows. Il trucco è trovare i livelli appropriati. Il livello shadow può essere trovato facilmente, ma il livello infoWindow viene creato dopo che è stato creato un POI infoWindow, quindi devi ascoltare l’evento click sullo stesso div di google. Quindi troverai il livello di informazioni POI di Info per z-index, o per URL di immagini, ma questo non è ben testato … Nota che se Google cambia lo z-index, smetterà di funzionare …

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

Non funziona più, dall’aggiornamento dell’API di Google Maps.

L’ho trovato finalmente!

Ecco la demo: http://jsfiddle.net/fbDDZ/14/ (facendo clic su “apri” o POI non fa nulla, facendo clic su “apri per favore” si apre InfoWindow)

L’idea è di applicare una patch a InfoWindow.prototype.open in modo da consentirgli di accettare il terzo argomento. Google non lo passa, ma dovremmo.

Il codice:

 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 apre InfoWindow su POI in questo modo:

 myInfoWin.open(map, poiMarker) 

La finestra non si aprirà, perché Google non ha detto “per favore”. Ecco come dovremmo aprire la nostra finestra informativa:

 myInfoWin.open(map, poiMarker, true); 

Modifica: Ok, sembra che Google abbia implementato una soluzione, guarda la risposta di xomena.

Ok, dopo aver cercato ovunque sembra che non puoi semplicemente visualizzare i POI con il clic disabilitato, puoi guardare qui per ulteriori discussioni:

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

e questo scambio in particolare:


Ciao,

C’è la possibilità di rendere i POI visibili ma non cliccabili?

Grazie Lorenzo


Chris Broadfoot

Sfortunatamente non Lorenzo. Dovrai applicare uno stile di mappa per hide le etichette POI:

[{featureType: “poi”, elementType: “etichette”, styler: [{visibilità: “distriggersto”}]}]

(o semplicemente hide i business pois, “poi.business”)


Questo proviene dagli sviluppatori di Google Maps, quindi non è ansible disabilitare il popup, ma solo i POI.

Vorrei controllare l’elemento usando firebug e utilizzare display:none !important; rimuovere questi stili se Google non ti consente di accedervi direttamente tramite l’API (che credo dovresti riuscire a)

Suggerisco di guardare la risposta che ho dato qui: come rimuovere i marcatori di default?

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