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:
E qui c’è la stessa mappa con i POI completamente rimossi:
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:
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 };