Suggerimento rapido incorporare nuove mappe di Google

Il nuovo Google Maps è stato reso pubblicamente disponibile al pubblico a luglio, ma è ancora un'anteprima di ciò che sarà il prodotto finale e quindi manca alcune caratteristiche familiari.

Ad esempio, hai provato a incorporare una nuova mappa di Google in una pagina Web? Il vecchio e affidabile pulsante "link" non si trova da nessuna parte! Alcune persone ti suggeriranno di tornare alla vecchia versione di Google Maps, incorporare un iframe nel modo originale, quindi tornare alla nuova anteprima di Maps una volta terminato. Ma c'è un altro modo, ed è un modo che ti aiuterà a sfruttare le nuove e più belle Google Maps, come questa:

Questa non è un'immagine ...

Maps Engine Lite

Maps Engine Lite (Beta) è uno strumento che ti consente di progettare e salvare le tue mappe personalizzate. Per poterlo utilizzare, è necessario disporre di un account Google e accedere.


Puoi quindi pubblicare e condividere le tue mappe, quindi iniziamo facendo clic su "Nuova mappa":


Inseriamo l'indirizzo HQ Envato nel campo di ricerca come esempio:


Dopo aver individuato l'ufficio e aggiunto un marcatore, ora possiamo dare un nome alla nostra mappa facendo clic su "Mappa senza titolo":


Possiamo anche cliccare su "Untitled layer" per dare un nome, dopo di che possiamo aggiungere tutti i tipi di posizioni, percorsi e aree alla nostra mappa. Possiamo importare anche tramite upload di file, ma per il momento ci concentreremo solo sul nostro singolo marker. Assicurati di aver aggiunto la posizione cercata alla tua mappa, quindi puoi concentrarti sulle funzioni dei marcatori.


Ora Envato HQ è elencato sotto il livello "Percorsi commerciali", possiamo alterarne il colore, l'etichetta e persino l'icona. Google ha fornito un sacco di possibilità di personalizzazione qui, quindi divertiti ad esplorare! Ho dato a HQ un'icona gialla da ufficio.


Un'altra interessante caratteristica delle nuove mappe di Google sono i suoi vari temi; clicca su "Mappa di base" e buttati fuori. Sono andato per "Acqua bianca":



Cambia le impostazioni di condivisione

Dopo aver completato la nostra mappa, ora dobbiamo modificare le impostazioni di condivisione, quindi fai clic sul pulsante "Condividi" in alto a destra.

Verrà visualizzata una finestra di dialogo in cui è possibile scegliere di modificare la visibilità della mappa da "Privata" a "Pubblica". Questo è necessario per incorporare la tua mappa in una pagina web.


Fatto questo, fai clic sull'icona "cartella" e seleziona "Incorpora nel mio sito".


Ti verrà fornito uno snippet HTML, come questo:

per incorporare un iframe in una pagina web.


Rendi la tua mappa fluida

Un'ultima cosa, la tua mappa non è esattamente reattiva nel suo stato attuale. Prendiamolo in un elemento fluido (molto simile a quelli usati per i video fluidi) in modo che possiamo includerlo in un layout reattivo.

Per prima cosa, avvolgiamo un ulteriore elemento attorno al nostro iframe:

Quindi dimensioniamo il wrapper usando il padding (una proprietà di altezza del fluido non funzionerà) e posizioniamo l'iframe al suo interno:

.involucro del fluido posizione: relativa; imbottitura-fondo: 56,25%; / * 16: 9 * / altezza: 0;  .fluid-wrapper iframe position: absolute; inizio: 0; a sinistra: 0; larghezza: 100%; altezza: 100%; confine: nessuno; 

Questa imbottitura del 56,25% fornisce al nostro contenitore un rapporto 16: 9, qualcosa che vale la pena prendere in considerazione per il video, ma puoi creare il tuo rettangolo di Google Maps in qualsiasi proporzione desideri.


Conclusione

Questo è tutto! Morto semplice davvero, ma uno di quei piccoli compiti utili che sono stati resi temporaneamente scomodi mentre Google ha fatto il passaggio alle nuove mappe.

ps) Hai visto il recente trekking di Google Maps Street View alle Isole Galápagos? Vale la pena il viaggio ...

Ulteriori informazioni su Google Maps su Tuts+

  • Come aggiungere ubicazioni filiali a Google Maps
  • Ottenere creatività con l'API di Google Maps
  • Aggiungi un tocco di realismo alle tue mappe di Google
  • Immagini di Google Map reattive e retinafatte