Come inserire gratuitamente una mappa Google (con uno o più push-pin) in una pagina di un proprio sito, ad esempio uno realizzato con WordPress (senza usare plug-in)

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:

Esistono numerosi plug-in in WordPress che consentono d’inserire mappe, ma è necessario avere un piano business (oltre che essere talvolta a pagamento per avere tutte le funzionalità offerte)

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:

https://autoscuolamonterosa.wordpress.com/contact/

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:

Informazioni su Enzo Contini

Electronic engineer
Questa voce è stata pubblicata in Just for fun!, Review e test, Smartphone OS, Tecnologia, Windows. Contrassegna il permalink.

Lascia un Commento/Leave a comment

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.