Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    Attribuire uno stile ad un pannello interno di MyMaps

    Ciao a tutti, ho un problema un pò particolare che vorrei risolvere.

    Nel sito che sto realizzando ho inserito una mappa google personalizzata, creata con MyMaps.

    La mappa, come saprete, crea in automatico una sorta di banda nera sovrapposta alla mappa nella parte più alta, che aggiunge alcune informazioni.

    Non volendo visualizzare quella banda, l'unica opzione che ho trovato è stata quella di lavorare sul css, aumentando l'altezza della mappa, spostandola in alto ed usando la funzione "overflow hidden" per tagliare la parte che non voglio visualizzare.

    Il problema è che quando si clicca sul punto che contrassegna la mia posizione nella mappa, si apre un pannello scorrevole da sinistra, che risulta ovviamente tagliato in alto per via delle modifiche css che ho dovuto applicare.

    Così, mendiate la funzione "ispeziona" di chrome, ho verificato che quel pannello è contrassegnato dal div "#featurecardPanel".

    Sempre tramite ispezione ho provato a dare a questo div un padding-top...e funziona alla grande!

    Ovviamente il div non è presente nel mio sito, ma viene aggiunto automaticamente da MyMaps.

    Pertanto ho pensato di dargli uno stile dinamicamente, mediante javascript, con questa stringa di codice:

    codice:
    [COLOR=var(--highlight-variable)]document[/COLOR][COLOR=var(--highlight-color)].[/COLOR][COLOR=var(--highlight-literal)]querySelector[/COLOR][COLOR=var(--highlight-color)]([/COLOR][COLOR=var(--highlight-variable)]'#featurecardPanel'[/COLOR][COLOR=var(--highlight-color)]).[/COLOR][COLOR=var(--highlight-color)]style[/COLOR][COLOR=var(--highlight-color)].[/COLOR][COLOR=var(--highlight-color)]paddingTop[/COLOR][COLOR=var(--highlight-color)] = [/COLOR][COLOR=var(--highlight-variable)]'66px'[/COLOR][COLOR=var(--highlight-color)];[/COLOR]
    Purtroppo però non funziona: nessun padding viene aggiunto a quel div.

    Vi viene in mente qualche soluzione per risolvere questo problema?

    Grazie!

  2. #2
    Non si capisce nulla del tuo codice, c'è qualcosa che rompe la formattazione....

  3. #3
    Quote Originariamente inviata da Dascos Visualizza il messaggio
    Non si capisce nulla del tuo codice, c'è qualcosa che rompe la formattazione....
    Hai ragione, per errore lo incollavo mentre conteneva della formattazione.

    Ecco il codice da me testato (non so perchè quanto lo incollo questo sito me lo converte in link).

    Ultima modifica di ivanisevic82; 02-03-2023 a 11:58

  4. #4
    Quote Originariamente inviata da ivanisevic82 Visualizza il messaggio
    Hai ragione, per errore lo incollavo mentre conteneva della formattazione.

    Ecco il codice da me testato (non so perchè quanto lo incollo questo sito me lo converte in link).

    Dunque, se ho ben capito il div featurecardPanel viene aggiunto dal sistema che crea la mappa, quindi credo "asincrono", cioè tu hai la tua grafica e i tuoi stili e js (tra cui il pezzetto che hai mostrato), poi da qualche parte chiami una funzione Js che crea la mappa.
    Se così fosse, la mappa (e quindi il div featurecardPanel) vengono creati DOPO che il tuo script è stato eseguito, quindi non potrà mai trovare quel div.
    Se ci fosse la possibilità, devi mettere lo script come funzione e chiamarla nel callback "onReady" (o simile) della mappa.
    codice:
    <script>
    function aggiungiPaddingMappa() {
         document.querySelector('#featurecardPanel').style.paddingTop = '66px';
    }
    </script>
    e nella callaback dovrai poi chiamare la funzione aggiungiPaddingMappa

    Per esempio con le chart di Google
    codice:
    // Create a table chart on your page.
    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, options);
    
    
    // Every time the table fires the "select" event, it should call your
    // selectHandler() function.
    google.visualization.events.addListener(table, 'select', selectHandler);
    
    
    function selectHandler(e) {
      alert('A table row was selected');
    }

  5. #5
    Perdonami ma il mio livello di conoscenze non mi consente di comprendere tutto ciò che hai scritto.

    In particolare, mi dici che nella callaback dovrò poi chiamare la funzione aggiungiPaddingMappa.


    Purtroppo non so cosa sia questa callback. posso chiederti un esempio di codice per testare la tua soluzione nel mio sito?

    Grazie per il supporto!

  6. #6
    Quote Originariamente inviata da ivanisevic82 Visualizza il messaggio
    Perdonami ma il mio livello di conoscenze non mi consente di comprendere tutto ciò che hai scritto.

    In particolare, mi dici che nella callaback dovrò poi chiamare la funzione aggiungiPaddingMappa.


    Purtroppo non so cosa sia questa callback. posso chiederti un esempio di codice per testare la tua soluzione nel mio sito?

    Grazie per il supporto!
    Ti ho risposto sopra....con l'esempio per la chart di Google....
    Nella documentazione relativa () ti dice chiaramente che supporta gli eventi e handler e quindi, sempre nell'esempio, ti dice che è possibile chiamare una funzione ogni volta che si clicca sulla chart.
    Il come e se si può implementare cambia ovviamente da libreria a libreria. Se tu usi jchart si dovrà fare in un certo modo, se lo fai con gchart si fa come scritto sopra, se lo fai con html5 puro dovrai scrivere tu il codice per intercettare gli eventi ecc ecc

    In buona sostanza, leggi nella documentazione di MyMaps se e come si può intercettare l'evento che dice che il grafico sia stato disegnato e se e come è possibile chiamare una funzione al verificarsi dell'evento intercettato.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.