Oramai siamo abituati a vedere nei siti, soprattutto quelli relativi a una attività commerciale, una mappa (generalmente quella di Google) che mostra dove si trova un posto specifico, con la possibilità di effettuare lo zoom a piacere e ottenere addirittura indicazioni stradali per raggiungerlo!
Può quindi essere interessante inserire in un proprio sito WordPress anche questa funzionalità, senza per questo dover pagare nulla! Sebbene esistano appositi plug-in in grado di offrire questo e altro, è necessario avere in WordPress un piano di abbonamento business e poi (almeno per ottenere tutte le funzionalità) in genere risultano a pagamento:
Tuttavia si può agevolmente giungere a un analogo risultato molto agevolmente anche senza l’uso di alcun plug-in e, come vedremo, senza necessariamente conoscere nulla di programmazione (sebbene si debba inserire del codice html che tuttavia uno deve solo copiare e incollare, senza necessariamente sapere nulla)!
Vediamo passo-passo come fare.
Per prima cosa si deve andare su https://www.google.com/maps e cercare il luogo d’interesse in modo che venga posizionato sulla mappa un apposito pushpin che lo identifichi.
Quindi si preme sulle tre linee in alto a sinistra per fare comparire il menù a tendina, scegliendo poi Condividi o incorpora mappa. Compare quindi una finestra che fornisce sia il link alla pagina Maps con la mappa per quel luogo sia del codice che, se inserito in una pagina di un sito, incorpora nella pagina proprio la mappa corrispondente: noi sceglieremo questa seconda possibilità, agendo quindi sul tab a destra!
Cliccando sul link COPIA HTML, viene messo negli appunti il codice che, inserito appropriatamente nella pagina del sito, ad esempio di uno realizzato con WordPress, consentirà appunto l’incorporamento della mappa di quel luogo specifico.
Andando poi nella pagina di WordPress in cui si desidera inserire la mappa, si deve premere sul + per inserire un nuovo blocco e poi su Sfoglia tutto, per poter avere visualizzate tutte le possibilità d’inserimento blocchi. Tra questi si seleziona HTML personalizzato e si inserisce quel codice precedentemente copiato dal sito di Maps:
Per poi si desidera, per puro senso estetico, centrare la mappa nella pagina, si può modificare a manina minimamente il codice, introducendo l’opportuno parametro nel codice HTML:
Ecco quindi il risultato che potete vedere anche direttamente nel sito in cui ho inserito tale mappa:
Si noti che la mappa inserita consente agevolmente di effettuare zoom e di richiedere anche la navigazione in quel luogo cliccando sulle frecce di Indicazioni stradali:
____________
Se si desidera poi visualizzare non solo un punto ma avere sulla medesima mappa dei push-pin multipli (ad esempio per indicare diversi negozi di una medesima catena) anche questo può essere realizzato anche senza l’uso di plug-in.
Infatti, basta crearsi una propria mappa andando in Google My Maps e inserire tutti i punti che si intende evidenziare.
Per aggiungere dei pushpin, si inserisce l’indirizzo e quindi, cliccando sopra il pushpin che indica il punto sulla mappa, sulla finestra popup che compare selezionare + Aggiungi alla mappa. Analogamente si procede per inserire altri punti d’interesse su quella medesima mappa.
È necessario poi cambiare quindi le impostazioni sulla privacy in modo da rendere la nostra mappa visibile a tutti su Internet.
Andando su Anteprima, viene aperto un nuovo tab nel browser che mostra la mappa e cliccando sui tre puntini in alto a sinistra compare un menù che contiene tra l’alto la voce Incorpora mappa. Viene aperta quindi una finestra con il codice HTML (iframe) da copiare e poi inserire in un blocco HTML personalizzato, analogamente a quanto descritto precedentemente:
Ad esempio, inserisco nel seguito quella mia mappa di prova (in cui ho inserito i tre pushpin blu) incorporando nel blocco HTML personalizzato quel codice HTML iframe indicato:
Enzo Contini Blog 