Share
Cosa starai creandoSe sei come me, hai utilizzato Google Maps per aggiungere mappe ai tuoi siti WordPress per anni, ma a volte ti senti un po 'frustrato per la mancanza di opzioni di personalizzazione.
In questo tutorial, ti mostrerò come utilizzare un'alternativa, un plugin per WordPress chiamato MapSVG che ti consente di aggiungere mappe interattive al tuo sito. È quindi possibile personalizzare le mappe con colori, segnaposti e popover e consentire agli utenti di eseguirne la ricerca.
Ti guiderò attraverso come configurare una mappa utilizzando il plug-in, come personalizzarlo e come aggiungerlo a una pagina del tuo sito.
Per seguire questo tutorial, avrai bisogno di:
Puoi creare una mappa di qualsiasi parte del mondo, ma per questo tutorial creerò una mappa del Regno Unito, dato che è da dove vengo, e la segnerò con i miei luoghi di vacanza preferiti qui. Chissà, potrei ispirarti!
La prima cosa che devi fare è connettersi all'API di Google Maps, in modo che il plug-in possa aggiungere marcatori per ciascuna delle tue posizioni.
Per ottenere una chiave API, vai alla Google Developer Console e segui le istruzioni qui. Non li esaminerò nei dettagli in quanto Google ti guiderà attraverso i passaggi e potrebbero cambiare nel momento in cui leggi questo.
Dovrai abilitare quanto segue nel pannello di controllo dell'API di Google (non nelle schermate del plug-in nel tuo amministratore del sito):
Dopo averlo fatto, copia la tua chiave API di Google e torna al tuo sito. Nella schermata principale di MapSVG, selezionare il API di Google pulsante. Incolla nella tua chiave API e salva.
Ora sei pronto per creare una mappa.
Per creare una mappa, fare clic su MapSVG link nel tuo menu di amministrazione, quindi fai clic su Nuova mappa SVG in alto a sinistra dello schermo. Da qui, è possibile selezionare da un elenco di mappe SVG fornite in bundle con il plug-in. Inizia a digitare il nome del paese in cui desideri una mappa e il plug-in si riempirà automaticamente per te.
Una volta selezionato il Paese, il plug-in genererà automaticamente una mappa che potrai personalizzare:
Inizia dandogli un nome nel Titolo campo sul lato destro, fare clic su Salvare pulsante, e quindi puoi iniziare a personalizzarlo.
Quando imporrai la mappa per la prima volta, sarà nera su uno sfondo grigio. Personalizziamolo.
Clicca su Colori nel menu a discesa sulla pagina di modifica della mappa, per accedere alla schermata di modifica del colore.
Ora passa un po 'di tempo a modificare i colori nella tua mappa usando i selettori di colori. È possibile personalizzare il colore di sfondo, il colore di base per le regioni, il colore del bordo, il colore del passaggio del mouse, il colore selezionato e altro.
Quando si modifica il passaggio del mouse e gli stati selezionati, è possibile impostare un colore personalizzato o utilizzare il Luminosità impostazione per utilizzare una versione più luminosa o opaca del colore di base.
Userò una tavolozza di blues, quindi la mia mappa non sembra troppo vistosa.
Ecco come appare la mia mappa con una contea selezionata e un'altra nello stato di hover:
Puoi anche modificare i colori delle singole regioni, per dare alla tua mappa un maggiore interesse visivo. Fai questo cliccando su Modifica regioni sopra la mappa o Regioni nel menu a discesa principale. Seleziona ciascuna regione e quindi seleziona il selettore dei colori sul lato destro dell'elenco delle regioni. Ha senso avere tutti i codici esadecimali per i tuoi colori memorizzati altrove, così puoi semplicemente copiarli e incollarli.
Ancora una volta, mi sto attenendo alla mia tavolozza di blues:
Prenditi del tempo per modificarli. La parte delicata consiste nell'organizzare i colori in modo che le contee o gli stati vicini siano di colori diversi!
Ora che hai la mappa come vuoi, è il momento di aggiungere alcuni campi che puoi usare per i tuoi marcatori. Lo fai usando il Banca dati opzione nel menu a discesa.
Clicca sul Modifica campi icona nella parte superiore del riquadro per iniziare ad aggiungere campi. Ho intenzione di aggiungere il seguente per i miei marcatori:
Puoi aggiungere quello che vuoi. Prenditi un po 'di tempo per pensare a quale tipo di informazioni le persone che visitano il tuo sito vorranno conoscere le posizioni sulla tua mappa. Ad esempio, se stai mappando gli uffici della tua azienda, le persone vorranno un nome e un indirizzo, e possibilmente informazioni sul tipo di attività che l'ufficio gestisce o sui suoi orari di apertura.
Il campo essenziale è marcatore-senza di esso, non sarai in grado di aggiungere questi indicatori alla tua mappa.
Puoi utilizzare una gamma di tipi di campo dalle caselle di testo per selezionare i campi, il che significa che puoi predefinire quali tipi di luoghi che stai aggiungendo e utilizzare. Per un'attività di vendita al dettaglio, questo significa che è possibile selezionare quali delle vostre sedi sono grandi magazzini, negozi fuori città o piccole boutique, ad esempio.
Quando modifichi il campo, puoi aggiungere un testo di aiuto per le altre persone che modificano il campo e puoi specificare se il campo sarà ricercabile. Ha senso avere il maggior contenuto di testo possibile ricercabile.
Adesso per la parte divertente!
La tua mappa è stata configurata e hai i campi del tuo database, ma devi comunque aggiungere quei marcatori.
Innanzitutto, è necessario aggiungere i dati per le posizioni nel database. Seleziona il Banca dati scheda dall'elenco a discesa se non ci si è già inseriti, quindi fare clic su + accedi in alto a destra per aggiungere ciascuna posizione a turno.
Continua ad aggiungere fino a quando non li hai tutti. Ecco i miei:
Ora che hai le posizioni nel database, è il momento di aggiungere l'indicatore per ognuna.
Per ogni posizione, inizia a digitare l'indirizzo nel marcatore campo. Il plug-in suggerirà automaticamente una posizione durante la digitazione:
Seleziona la posizione corretta dall'elenco che ti viene fornito dal plug-in, quindi salva la posizione. Ripeti l'operazione per tutte le posizioni nel tuo database.
Una volta che hai finito, il tuo elenco di posizioni sarà simile a questo:
Ora hai la tua mappa, le tue posizioni e tutti i tuoi marcatori. Ma non hai ancora finito! Il prossimo passo è configurare i popover. In questo modo, quando qualcuno visualizza la mappa, può passare con il mouse sulle posizioni che hai aggiunto e vedere la tua descrizione e immagine (o qualsiasi altra cosa che hai aggiunto alla tua mappa).
Seleziona il Azioni scheda nel menu a discesa. Scorri verso il basso fino a Marker click sezione e controllare il Mostra il popover casella di controllo. Assicurati che sia questa scatola: ce ne sono alcuni su questo schermo, per diversi popover.
Dopo averlo fatto, devi impostare il modello per i popover. Clicca il Collegamento del modello popover di oggetti DB per visualizzare un riquadro di modifica vuoto. Dovrai popolare questo usando una combinazione di HTML e campi dal plugin.
Ecco il markup che sto usando nel mio:
nome
descrizione
#each images/ogni
Il testo all'interno delle parentesi graffe sarà lo stesso testo che è stato impostato come titolo del campo per ciascuno dei campi aggiunti al database. Se non riesci a ricordare cosa hai aggiunto, torna al Banca dati scheda e saranno i titoli nell'elenco.
L'unico tipo di campo diverso è l'immagine. Qui, devi aggiungere il segnaposto per recuperare l'origine della miniatura. Il codice sopra scorre tra le immagini aggiunte al campo delle immagini, quindi se ne aggiungi più di uno, verranno mostrate tutte. Per ulteriori informazioni, consultare la documentazione del plugin.
Ora prova a cliccare su uno dei marker e vedrai un popover:
Suggerimento: se non riesci a vedere un popover, potrebbe essere perché hai controllato il torto Mostra il popover casella o stai modificando il modello sbagliato. Assicurati che la casella di controllo che hai selezionato fosse nel Marker click sezione del Azioni scheda e che il modello che stai modificando è Modello popover di oggetti DB. È possibile selezionare i modelli dall'elenco a discesa in Modelli linguetta.
Affinché gli utenti possano vedere i dettagli delle tue sedi e cercare i contenuti nella tua mappa, dovrai configurare la directory utilizzata per la ricerca e assicurarti che la ricerca sia attivata.
Vai al elenco scheda. Nel elenco attivare, selezionare Sopra. Sotto Fonte di dati, selezionare Banca dati.
Clicca sul Elemento della directory collegamento modello per modificare il modello utilizzato per la directory. Dovrai aggiungere i tuoi campi in un modo simile a quello che hai fatto quando aggiungi i popover, eccetto che questa volta usi solo i segnaposto e nessun HTML. Sto solo aggiungendo nome, ma potresti voler includere di più.
Nota: se non si desidera visualizzare un elenco di posizioni accanto alla propria mappa, attivare elenco a via e non preoccuparti per il modello.
Ora colpisci il Salvare pulsante per salvare la mappa. È ora di aggiungerlo a una pagina del tuo sito.
Apri (o crea) la pagina in cui aggiungi la mappa.
Nel punto in cui desideri visualizzare la mappa, fai clic su Inserisci MapSVG icona, che sembra un pennarello nero.
Seleziona la mappa che desideri inserire dall'elenco e il plugin aggiungerà un codice breve alla tua pagina per visualizzare la mappa. Ora salva la tua pagina e provala.
Ecco la mia mappa:
E quando seleziono una delle posizioni, ecco il popover:
L'utilizzo del plugin MapSVG ti offre un modo per aggiungere mappe al tuo sito con molte più opzioni di personalizzazione rispetto alla semplice incorporazione di una mappa di Google. Se vuoi che la tua mappa assomigli a una mappa di Google ma includa i popover e la directory, puoi farlo.
Questo tutorial ha dimostrato un modo di creare una mappa usando il plugin. Per conoscere tutte le sue funzionalità e vedere come è possibile aggiungere potenti mappe personalizzate, consultare la documentazione.
Accentsconagua