Come inserire una mappa (dinamica!!!) usando Google Maps

Colgo l’occasione data dal commento di mika29 ad un nostro vecchio post per aggiornare, ed aggiungere, informazioni sul come fare per includere in un post del nostro blog ospitato su WordPress.com.

Nel post linkato qui sopra, infatti, Isadora ci parlava delle possibilità offerte nel marzo 2008 dalla nostra piattaforma, ossia quelle dell’inclusione di un elemento statico preso da Google Maps escludendo quindi la possibilità di inserire una mappa dinamica grazie all’uso di javascript e tecnologie similari che sono “bandite” dal sistema (almeno per gli account gratuiti).

Fortunatamente nel corso dei mesi le cose sono cambiate ed ora è possibile inserire una mappa dinamica, grazie al lavoro di coding degli Automattic guys. Andiamo a vedere come fare.

Per prima cosa andiamo sul sito di Google Maps, inseriamo l’indirizzo di riferimento e facciamo caricare la pagina. Zoomiamo sino al livello di dettaglio desiderato e clicchiamo sul tasto link evidenziato in figura:

Link to address on Google Maps result page

Fatto cio si aprirà un pop-up con due link, copiamo quello che – in italiano – ci dice “Incolla HTML da incorporare nel sito web” e che corrisponde alla seconda riga nella figura seguente:

Incolliamo quindi il codice nell’area di scrittura del post …

… e quindi su Salva, Aggiorno o Pubblica e potremo poi verificare che il sistema ha automaticamente riconosciuto il codice convertendolo nel formato necessario ad una sua corretta interpretazione, ed infatti vedremo qualcosa come quello che vediamo in quest’altra immagine …

.. ed avremo quindi la nostra mappa! Ad esempio:

Alcune avvertenze prima di “salutarci”:

  • non copiare il pezzo di codice [googlemaps …. ma lasciamolo generare al sistema;
  • non è possibile integrare una mappa di questo tipo nella barra laterale, Possiamo usare i link “Email o IM” dalla procedura di cui sopra per l’inclusione del link in una widget di testo;
  • possiamo inserire più mappe all’interno di un singolo post o pagina;
  • affinché lo script funzioni correttamente è necessario che il link sia generato da una pagina in inglese del sito Google Maps {*}.

{*} Nei commenti nel forum di supporto pare che il problema sia risolvibile generano a mano lo pseudocodice, contrariamente a quanto ufficialmente sostenuto, la parte di link “buona” che va inclusa parrebbe essere del tipo PARTE_DA_HTTP_AD_EMBED&w=300&h=300, dove w=300 ed h=300 sono i pixel della grandezza della finestra in cui la mappa “zooma”.

È tutto (per oggi!)


Riferimenti: Support WordPress.com: Google Maps

Google Maps su blog WordPress.com

Inserire una cartina su un blog WordPress.com utilizzando Google Maps è possibile e anche molto facile, grazie alla possibilità di realizzare cosiddette “Static Maps“, che possono essere incluse nel proprio blog senza fare uso di codice javascript.

L’unico requisito fondamentale è di avere un account su Google per poter realizzare una API key per il blog su cui si vuole pubblicare la cartina.

I passi da fare sono i seguenti:

  1. Creare una API Key: andare alla pagina apposita, compilare il formulario e cliccare su “Generate API Key” per il proprio blog;
  2. Creare la cartina desiderata: sulla pagina “Static Map Wizard“;
  3. Generare il link alla cartina: cliccare su “Generate Key” e copiare integralmente il link generato;
  4. Utilizzare il link generato: esattamente come se fosse il link ad un’immagine (con il tag <img src=”Link completo” />

Il risultato sarà simile a questo (e vediamo se tra i miei lettori qualcuno sa di che indirizzo si tratta…):

Esempio di cartina

Nota per gli utenti che utilizzano il domain mapping: Se utilizzate l’editor grafico la cartina non verrà visualizzata nell’editor, ma apparirà comunque nel post pubblicato, perché Google crea la cartina esclusivamente per l’url inserito al punto 1 al momento di creare l’API Key.

Fonte: Howto: Google Maps on WordPress.com

Manda ad un amico »