Di come inserire in un sito una mappa interattiva si è parlato in numerosi post, e non solo in relazione a WordPress (WP). Trattandosi di una delle funzionalità più apprezzate dagli utenti, non sorprende notare la presenza di una miriade di estensioni ad hoc. E sfogliando il vasto database online di WP salta sicuramente all’occhio WP Google Maps (attenzione a non confonderlo con il plugin Google Map) con oltre 400 mila installazioni all’attivo.
Per prima cosa raggiungiamo la consueta sezione della bacheca (Plugin, Aggiungi nuovo) e procediamo all’installazione ed attivazione da bottone contestuale (Installa ora,Attiva). A procedura ultimata saremo automaticamente reindirizzati alla schermata principale delle impostazioni:
Ci sarà chiesto quale map engine utilizzare, Google Maps o OpenLayer. Nel caso in cui si scelga il primo, sarà necessario creare una chiave API accedendo al portale dedicato con un account Google:
Clicchiamo su Create Api key now e seguiamo la procedura guidata di creazione nuovo progetto (Continua e Crea progetto) per ottenere la chiave API personale.
Incolliamola nell’apposita casella (visibile nell’immagine qui sopra) e confermiamo dal bottone Salva la Mappa per iniziare a lavorare sulla schermata principale della mappa (se abbiamo scelto OpenLayer la visualizzeremo immediatamente senza alcuna procedura aggiuntiva):
Assegniamo un nome alla nostra mappa (in questo esempio Firenze), scegliamo le dimensioni (es:100×400) ed il livello di zoom. Per evidenziare un punto di interesse (il familiare pin rosso) clicchiamo con il tasto destro del mouse sulla posizione desiderata. Quando abbiamo terminato le modifiche, clicchiamo su Salva la Mappa – ricordiamoci di annotare lo shortcode grazie al quale potremo inserire la mappa in qualsiasi pagina/articolo.
Procediamo ora alla creazione di un nuovo elemento (pagina/articolo) ed incolliamo nell’editor testuale lo shortcode precedentemente annotato. Visualizziamo infine l’anteprima della pagina per controllare il risultato del nostro lavoro:
Cliccando sull’icona in alto a destra si passerà alla modalità di visualizzazione “schermo intero”.
