Share
Wat je gaat creërenAls je op mij lijkt, gebruik je Google Maps al jaren om kaarten toe te voegen aan je WordPress-sites, maar soms raak je een beetje gefrustreerd over het gebrek aan aanpassingsmogelijkheden.
In deze zelfstudie laat ik je zien hoe je een alternatief kunt gebruiken: een WordPress-plug-in genaamd MapSVG waarmee je interactieve kaarten aan je site kunt toevoegen. U kunt uw kaarten vervolgens aanpassen met kleuren, tijdelijke aanduidingen en popovers en uw gebruikers laten zoeken.
Ik zal u helpen met het instellen van een kaart met behulp van de plug-in, hoe u deze aanpast en hoe u deze aan een pagina op uw site toevoegt..
Als u deze zelfstudie wilt volgen, heeft u het volgende nodig:
Je kunt overal ter wereld een kaart maken, maar voor deze tutorial ga ik een kaart van het Verenigd Koninkrijk maken, want daar woon ik vandaan en markeer het met mijn favoriete vakantieplekken hier. Wie weet, ik kan je inspireren!
Het eerste dat u moet doen, is een verbinding maken met de Google Maps API, zodat de plug-in markeringen voor elk van uw locaties kan toevoegen.
Als u een API-sleutel wilt, gaat u naar de Google-ontwikkelaarsconsole en volgt u de instructies daar. Ik zal ze niet in detail bespreken, aangezien Google je door de stappen leidt en ze kunnen veranderen als je dit leest.
U moet het volgende inschakelen in het configuratiescherm van Google API (niet in de invoegvensters van de beheerder van uw site):
Zodra u dit hebt gedaan, kopieert u uw Google API-sleutel en gaat u terug naar uw site. Selecteer op het hoofdscherm van MapSVG de Google API knop. Plak in je API-sleutel en sla op.
Nu bent u klaar om een kaart te maken.
Als u een kaart wilt maken, klikt u op MapSVG link in uw admin-menu en klik vervolgens op Nieuwe SVG-kaart links bovenaan het scherm. Hier kunt u kiezen uit een lijst met SVG-kaarten die bij de plug-in zijn geleverd. Begin met het typen van de naam van het land waar u een kaart van wilt hebben en de plug-in zal automatisch voor u invullen.
Zodra u uw land heeft geselecteerd, genereert de plug-in automatisch een kaart die u kunt aanpassen:
Begin door het een naam te geven in de Titel veld aan de rechterkant, klik op de Opslaan knop, en dan kunt u beginnen met het aanpassen van het.
Wanneer u uw kaart voor het eerst importeert, is deze zwart tegen een grijze achtergrond. Laten we dat aanpassen.
Klik op kleuren in het vervolgkeuzemenu op de kaartbewerkingspagina om toegang te krijgen tot het kleurenbewerkingsscherm.
Besteed nu wat tijd aan het aanpassen van de kleuren op uw kaart met behulp van de kleurkiezers. U kunt de achtergrondkleur, de basiskleur voor uw regio's, de randkleur, zweefkleur, geselecteerde kleur en meer aanpassen.
Wanneer u de zweeftekst en de geselecteerde statussen bewerkt, kunt u een aangepaste kleur instellen of de Helderheid instellen om een helderdere of saaiere versie van de basiskleur te gebruiken.
Ik ga een palet met blues gebruiken, dus mijn kaart ziet er niet al te opzichtig uit.
Hier ziet u hoe mijn kaart eruit ziet met één provincie geselecteerd en een andere in de hover-status:
U kunt ook de kleuren van afzonderlijke regio's bewerken om uw kaart meer visuele interesse te geven. Doe dit door op te klikken Regio's bewerken boven de kaart of Regio's in de hoofdkeuzelijst. Selecteer elke regio en selecteer vervolgens de kleurkiezer aan de rechterkant van de lijst met regio's. Het is logisch om alle hexadecimale codes voor uw kleuren ergens anders te laten opslaan, zodat u ze gewoon kunt kopiëren en plakken.
Nogmaals, ik blijf bij mijn palet van blues:
Neem even de tijd om deze aan te passen. Het lastige is om de kleuren zo in te delen dat aangrenzende provincies of staten in verschillende kleuren zijn!
Nu je je kaart hebt laten lijken zoals jij dat wilt, is het tijd om een aantal velden toe te voegen die je kunt gebruiken voor je markeringen. U doet dit met behulp van de Database optie in het vervolgkeuzemenu.
Klik op de Bewerk velden pictogram boven aan het venster om velden toe te voegen. Ik voeg het volgende toe voor mijn markeringen:
Je zou kunnen toevoegen wat je wilt. Neem even de tijd om na te denken over wat voor soort informatie mensen die uw site bezoeken willen weten over de locaties op uw kaart. Als u bijvoorbeeld de kantoren van uw bedrijf in kaart brengt, willen mensen een naam en adres en mogelijk informatie over wat voor bedrijf het kantoor heeft of de openingstijden..
Het essentiële veld is Markeerstift-zonder dit, kunt u die markeringen niet toevoegen aan uw kaart.
U kunt een reeks veldtypen uit tekstvakken gebruiken om velden te selecteren, wat betekent dat u vooraf kunt bepalen welke typen locaties u toevoegt en deze gebruikt. Voor een detailhandel kan dit betekenen dat u kunt selecteren welke van uw locaties grote winkels, winkels in de stad of kleine boetieks zijn, bijvoorbeeld.
Wanneer u het veld bewerkt, kunt u helptekst toevoegen voor andere personen die het veld bewerken en kunt u opgeven of het veld doorzoekbaar is. Het is logisch om zoveel mogelijk tekstinhoud doorzoekbaar te maken.
Nu voor het leuke gedeelte!
Uw kaart is helemaal ingesteld en u heeft uw databasevelden, maar u moet die markeringen nog toevoegen.
Eerst moet u de gegevens voor uw locaties in de database toevoegen. Selecteer de Database Klik in de vervolgkeuzelijst op tab als u zich nog niet in de vervolgkeuzelijst bevindt en klik op de + teken in de rechterbovenhoek om elke locatie om beurten toe te voegen.
Blijf toevoegen totdat je ze allemaal hebt. Hier zijn de mijne:
Nu u de locaties in de database hebt, is het tijd om de markering voor elke locatie toe te voegen.
Vink voor elke locatie het adres in de Markeerstift veld. De plug-in suggereert automatisch een locatie terwijl u typt:
Selecteer de juiste plaats in de lijst die de plug-in u geeft en sla uw locatie op. Herhaal dit voor alle locaties in uw database.
Als u klaar bent, ziet uw lijst met locaties er ongeveer zo uit:
U hebt nu uw kaart, uw locaties en al uw markeringen. Maar je bent nog niet klaar! De volgende stap is het configureren van popovers. Op die manier kunnen ze, wanneer iemand de kaart bekijkt, over de locaties zweven die u hebt toegevoegd en uw beschrijving en afbeelding zien (of iets anders dat u aan uw eigen kaart hebt toegevoegd).
Selecteer de acties tabblad in het vervolgkeuzemenu. Blader omlaag naar de Marker klik sectie en controleer de Popover tonen checkbox. Zorg ervoor dat dit dit vak is - er zijn er een paar op dit scherm, voor verschillende popovers.
Zodra je dat hebt gedaan, moet je de sjabloon voor de popovers instellen. Klik op de DB Object popover-sjabloonlink om een leeg bewerkingspaneel weer te geven. U moet dit invullen met een combinatie van HTML en velden uit de plug-in.
Dit zijn de markeringen die ik gebruik in de mijne:
naam
Omschrijving
#each afbeeldingen/elk
De tekst binnen de accolades is dezelfde tekst die is ingesteld als de veldtitel voor elk van de velden die u aan de database hebt toegevoegd. Als je niet meer weet wat je hebt toegevoegd, ga je terug naar de Database tab en zij zullen de koppen in de lijst zijn.
Het enige veldtype dat anders is, is afbeeldingen. Hier moet u de tijdelijke aanduiding toevoegen om de bron voor de miniatuur op te halen. De code hierboven loopt door alle afbeeldingen die aan het veld met afbeeldingen zijn toegevoegd, dus als u er meer dan één toevoegt, worden ze allemaal weergegeven. Raadpleeg de documentatie bij de plug-in voor meer informatie.
Probeer nu op een van de markeringen te klikken en je ziet een popover:
Tip: als u geen popover kunt zien, kan dit zijn omdat u het verkeerde heeft gecontroleerd Popover tonen box of zijn de bewerking van de verkeerde sjabloon. Zorg ervoor dat het selectievakje dat je hebt aangevinkt in de Marker klik deel van de acties tab en dat de sjabloon die u aan het bewerken bent DB Object popover-sjabloon. U kunt sjablonen selecteren in de vervolgkeuzelijst in de templates tab.
Zodat gebruikers de details van uw locaties kunnen zien en de inhoud op uw kaart kunnen doorzoeken, moet u de directory configureren die wordt gebruikt voor zoeken en ervoor zorgen dat zoeken is ingeschakeld.
Ga naar de directory tab. In de directory omschakelen, selecteren Op. Onder Databron, kiezen Database.
Klik op de Directory-item sjabloonkoppeling om de sjabloon te bewerken die voor de map wordt gebruikt. U moet uw velden op dezelfde manier toevoegen als de popovers, maar deze keer gebruikt u alleen de tijdelijke aanduidingen en geen HTML. Ik voeg gewoon toe naam, maar misschien wilt u er nog meer toevoegen.
Opmerking: als u niet wilt dat een lijst met locaties naast uw kaart verschijnt, schakelt u om directory naar Uit en maak je geen zorgen over de sjabloon.
Raak nu de Opslaan om uw kaart op te slaan. Het is tijd om het toe te voegen aan een pagina op uw site.
Open (of maak) de pagina waaraan u de kaart wilt toevoegen.
Waar u de kaart wilt laten verschijnen, klikt u op de Plaats MapSVG pictogram, dat eruit ziet als een zwarte marker.
Selecteer de kaart die u in de lijst wilt invoegen en de plug-in zal een shortcode aan uw pagina toevoegen om de kaart weer te geven. Sla nu je pagina op en test hem.
Dit is mijn kaart:
En als ik een van de locaties selecteer, is hier de popover:
Door de MapSVG-plug-in te gebruiken, kunt u kaarten aan uw site toevoegen met veel meer aanpassingsopties dan eenvoudigweg een Google-kaart insluiten. Als u wilt dat uw kaart eruitziet als een Google-kaart maar de popovers en directory bevat, kunt u dit doen.
Deze zelfstudie heeft aangetoond hoe je met behulp van de plug-in een kaart kunt maken. Raadpleeg de documentatie voor meer informatie over alle functies en hoe u krachtige aangepaste kaarten kunt toevoegen.
Accentsconagua