Share
Hva du skal skapeHvis du er som meg, har du brukt Google Maps til å legge til kart på WordPress-nettstedene dine i mange år, men du blir noen ganger litt frustrert om mangelen på tilpasningsalternativer.
I denne opplæringen skal jeg vise deg hvordan du bruker et alternativ - et WordPress-plugin kalt MapSVG som lar deg legge til interaktive kart på nettstedet ditt. Du kan deretter tilpasse kartene dine med farger, plassholdere og popovers, og la brukerne søke etter dem.
Jeg skal gå gjennom hvordan du setter opp et kart ved hjelp av pluginet, hvordan du tilpasser det og hvordan du legger det til på en side på nettstedet ditt.
For å følge denne opplæringen må du:
Du kan lage et kart over hvor som helst i verden, men for denne opplæringen skal jeg lage et kart over Storbritannia, som det er der jeg kommer fra, og merk det med favorittferdestedene mine her. Hvem vet, jeg kan inspirere deg!
Det første du må gjøre, er å koble til Google Maps API, slik at pluginet kan legge til markører for hver av plasseringene dine.
For å få en API-nøkkel, gå til Google-utviklerkonsollen og følg instruksjonene der. Jeg vil ikke gå gjennom dem i detalj, da Google vil lede deg gjennom trinnene, og de kan endres når du leser dette.
Du må aktivere følgende i kontrollpanelet for Google API (ikke i plugin-skjermene i administrasjonen til nettstedet ditt):
Når du har gjort det, kopierer du Google API-nøkkelen og går tilbake til nettstedet ditt. På hovedskjermbildet MapSVG velger du Google API knapp. Lim inn API-nøkkelen din og lagre.
Nå er du klar til å lage et kart.
For å opprette et kart klikker du på MapSVG lenke i admin-menyen din, og klikk deretter på Ny SVG-kart øverst til venstre på skjermen. Herfra kan du velge fra en liste over SVG-kart som følger med plugin. Start med å skrive navnet på landet du vil ha et kart over, og pluginet vil automatisk utfylle for deg.
Når du har valgt landet ditt, vil pluginet automatisk generere et kart for at du skal tilpasse:
Start med å gi det et navn i Tittel feltet på høyre side, klikk på Lagre knappen, og så kan du begynne å tilpasse den.
Når du først importerer kartet, blir det svart mot en grå bakgrunn. La oss tilpasse det.
Klikk på Farger i rullegardinmenyen på kartredigeringssiden, for å få tilgang til fargedigeringsskjermbildet.
Nå bruker du litt tid på å justere fargene på kartet ved hjelp av fargeplukkere. Du kan tilpasse bakgrunnsfargen, basisfarge for regionene dine, grensefargene, svingfarge, valgt farge og mer.
Når du redigerer sveiven og valgte stater, kan du enten angi en egendefinert farge eller bruke lysstyrke Innstilling for å bruke en lysere eller dullere versjon av basisfargen.
Jeg skal bruke en palett av blues, slik at kartet mitt ikke ser for grønt ut.
Slik ser kartet mitt ut med ett fylke valgt og et annet i hover-tilstanden:
Du kan også redigere fargene til de enkelte regionene, for å gi kartet mer visuell interesse. Gjør dette ved å klikke på Rediger regioner over kartet eller regioner i hoveddisplayet. Velg hver region og velg deretter fargeplukkeren på høyre side av listen over regioner. Det er fornuftig å ha alle heksekoder for farger lagret andre steder, så du kan bare kopiere og lime dem inn.
Igjen, jeg stikker med min palett av blues:
Ta deg tid til å finjustere disse. Den vanskelige delen er å arrangere fargene slik at nærliggende fylker eller stater er i forskjellige farger!
Nå som du har kartet ditt på den måten du vil ha det til, er det på tide å legge til noen felt du kan bruke til markørene dine. Du gjør dette ved hjelp av database alternativet i rullegardinmenyen.
Klikk på Rediger felt ikonet øverst i ruten for å begynne å legge til felt. Jeg skal legge til følgende for mine markører:
Du kan legge til hva du vil. Ta deg tid til å tenke på hva slags informasjon folk som besøker nettstedet ditt vil vite om stedene på kartet ditt. Hvis du for eksempel kartlegger bedriftens kontorer, vil folk ha et navn og en adresse, og muligens informasjon om hva slags virksomhet som kontoret håndterer eller åpningstidene.
Det viktige feltet er Marker-uten det, vil du ikke kunne legge til disse markørene på kartet ditt.
Du kan bruke en rekke felttyper fra tekstbokser for å velge felt, noe som betyr at du kan forhåndsdefinere hvilke typer sted du legger til og bruker det. For en detaljhandel betyr dette at du kan velge hvilke av dine steder som er store butikker, utenfor bybutikker eller små butikker, for eksempel.
Når du redigerer feltet, kan du legge til hjelpetekst for andre personer som redigerer feltet, og du kan angi om feltet skal søkes. Det er fornuftig å ha så mye tekstinnhold som mulig søkbar.
Nå for den morsomme delen!
Kartet ditt er satt opp, og du har databasefelter, men du må fortsatt legge til disse markørene.
Først må du legge til dataene for plasseringene i databasen. Velg database tab fra rullegardinlisten hvis du ikke allerede er i den, og klikk deretter på + Tegn øverst til høyre for å legge til hvert sted i sin tur.
Fortsett å legge til du har dem alle. Her er min:
Nå som du har plasseringene i databasen, er det på tide å legge til markøren for hver enkelt.
For hvert sted, begynn å skrive adressen i Marker felt. Pluggen vil automatisk foreslå en plassering mens du skriver:
Velg riktig sted fra listen som plugin gir deg, og lagre deretter posisjonen din. Gjenta dette for alle stedene i databasen din.
Når du er ferdig, vil listen over steder se slik ut:
Du har nå kartet, posisjonene dine og alle markørene dine. Men du er ikke ferdig enda! Det neste trinnet er å konfigurere popovers. På den måten, når noen ser på kartet, kan de svinge over de stedene du har lagt til og se beskrivelsen og bildet ditt (eller noe annet du har lagt til i ditt eget kart).
Velg handlinger fanen i rullegardinmenyen. Rull ned til Marker klikk delen og sjekk Vis popover boksen. Pass på at det er denne boksen - det er noen av dem på denne skjermen, for forskjellige popovers.
Når du har gjort det, må du sette opp malen for popovers. Klikk på DB Objekt Popover Template Link for å vise en tom redigeringsrute. Du må fylle ut dette ved hjelp av en kombinasjon av HTML og felt fra plugin.
Her er merket jeg bruker i min:
Navn
beskrivelse
#each bilder/Hver
Teksten inne i bøylene vil være den samme teksten som ble opprettet som feltittel for hvert av feltene du la til i databasen. Hvis du ikke kan huske hva du la til, gå tilbake til database fanen, og de vil være overskriftene i listen.
Den ene felt typen som er forskjellig er bilder. Her må du legge til plassholderen for å hente kilden til miniatyrbildet. Koden ovenfor løper gjennom noen bilder lagt til bildefeltet, så hvis du legger til flere enn en, vil de alle bli vist. For mer om dette, se plugin dokumentasjonen.
Prøv nå å klikke på en av markørene, og du vil se et popover:
Tips: Hvis du ikke kan se et popover, kan det være fordi du sjekket feil Vis popover boks eller redigerer feil mal. Kontroller at avkryssingsboksen du sjekket var i Marker klikk delen av handlinger fanen og at malen du redigerer er DB Objekt popover mal. Du kan velge maler fra rullegardinlisten i maler tab.
Slik at brukerne kan se detaljene for stedene dine og søke på innholdet i kartet ditt, må du konfigurere katalogen som brukes til søk og sørge for at søk er slått på.
Gå til Directory fane. I Directory veksle, velg På. Under Datakilde, å velge database.
Klikk på Katalog element malkobling for å redigere malen som brukes til katalogen. Du må legge til feltene dine på samme måte som du gjorde når du legger til popovers, bortsett fra denne gangen bruker du bare plassholderne og ingen HTML. Jeg legger bare til Navn, men du vil kanskje inkludere mer.
Merk: Hvis du ikke vil ha en liste over steder som skal vises ved siden av kartet, kan du bytte Directory til Av og ikke bekymre deg for malen.
Nå treffer du Lagre knappen for å lagre kartet. Det er på tide å legge til det på en side på nettstedet ditt.
Åpne (eller opprett) siden du vil legge til kartet til.
Hvor du vil at kartet skal vises, klikker du på Sett inn MapSVG ikonet, som ser ut som en svart markør.
Velg kartet du vil sette inn fra listen, og pluginet legger til en kortnummer på siden din for å vise kartet. Lagre siden din og test den.
Her er kartet mitt:
Og når jeg velger en av stedene, her er popover:
Ved hjelp av MapSVG-plugin-modulen kan du legge til kart på nettstedet ditt med mange flere tilpasningsalternativer enn å bare legge inn et Google-kart. Hvis du vil at kartet skal se ut som et Google-kart, men inkluderer popovers og katalog, kan du gjøre dette.
Denne opplæringen har vist en måte å lage et kart ved hjelp av plugin. Hvis du vil vite mer om alle funksjonene og se hvordan du kan legge til kraftige tilpassede kart, sjekk dokumentasjonen.
Accentsconagua