Share
Was Sie erstellen werdenWenn Sie wie ich sind, verwenden Sie Google Maps seit Jahren zum Hinzufügen von Karten zu Ihren WordPress-Sites. Manchmal sind Sie jedoch etwas frustriert, wenn Sie keine Anpassungsmöglichkeiten haben.
In diesem Tutorial werde ich Ihnen zeigen, wie Sie ein alternatives WordPress-Plugin namens MapSVG verwenden, mit dem Sie interaktive Karten zu Ihrer Site hinzufügen können. Sie können dann Ihre Karten mit Farben, Platzhaltern und Popovers anpassen und Ihre Benutzer sie durchsuchen lassen.
Ich gehe Sie durch, wie Sie eine Karte mit dem Plugin einrichten, anpassen und wie Sie sie zu einer Seite Ihrer Website hinzufügen.
Um diesem Tutorial zu folgen, benötigen Sie:
Sie können eine Karte von überall auf der Welt erstellen, aber für dieses Tutorial werde ich eine Karte des Vereinigten Königreichs erstellen, da ich von dort komme und meine bevorzugten Urlaubsorte hier markieren. Wer weiß, ich kann dich inspirieren!
Als Erstes müssen Sie eine Verbindung zum Google Maps-API herstellen, damit das Plugin Marker für jeden Ihrer Standorte hinzufügen kann.
Um einen API-Schlüssel zu erhalten, rufen Sie die Google-Entwicklerkonsole auf und befolgen Sie die dortigen Anweisungen. Ich werde sie nicht ausführlich durchgehen, da Google Sie durch die einzelnen Schritte führt, und sie können sich ändern, wenn Sie dies lesen.
Sie müssen Folgendes im Google API-Steuerungsfeld aktivieren (nicht in den Plugin-Bildschirmen Ihres Site-Administrators):
Sobald Sie dies getan haben, kopieren Sie Ihren Google-API-Schlüssel und kehren Sie zu Ihrer Website zurück. Wählen Sie im Hauptbildschirm von MapSVG die Option Google API Taste. Fügen Sie Ihren API-Schlüssel ein und speichern Sie.
Jetzt können Sie eine Karte erstellen.
Um eine Karte zu erstellen, klicken Sie auf MapSVG Link in Ihrem Admin-Menü und klicken Sie dann auf Neue SVG-Karte oben links auf dem Bildschirm. Hier können Sie aus einer Liste von SVG-Karten auswählen, die im Lieferumfang des Plugins enthalten sind. Beginnen Sie, den Namen des Landes einzugeben, von dem Sie eine Karte haben möchten, und das Plugin wird automatisch für Sie gefüllt.
Sobald Sie Ihr Land ausgewählt haben, generiert das Plugin automatisch eine Karte, die Sie anpassen können:
Beginnen Sie, indem Sie ihm einen Namen geben Titel Klicken Sie auf der rechten Seite auf das Feld sparen und Sie können mit dem Anpassen beginnen.
Wenn Sie Ihre Karte zum ersten Mal importieren, wird sie vor einem grauen Hintergrund schwarz angezeigt. Lass uns das anpassen.
Klicke auf Farben im Dropdown-Menü auf der Kartenbearbeitungsseite, um den Bildschirm für die Farbbearbeitung aufzurufen.
Nehmen Sie sich jetzt etwas Zeit, um die Farben in Ihrer Karte mithilfe der Farbauswahl zu optimieren. Sie können die Hintergrundfarbe, die Grundfarbe für Ihre Regionen, die Rahmenfarbe, die Schwebeflugfarbe, die ausgewählte Farbe usw. anpassen.
Beim Bearbeiten des Hover und der ausgewählten Zustände können Sie entweder eine benutzerdefinierte Farbe festlegen oder das Symbol verwenden Helligkeit Einstellung, um eine hellere oder mattere Version der Grundfarbe zu verwenden.
Ich werde eine Palette von Blues verwenden, damit meine Karte nicht zu grell wirkt.
So sieht meine Karte aus, wenn ein Landkreis ausgewählt ist und ein anderer im Schwebezustand:
Sie können auch die Farben einzelner Regionen bearbeiten, um Ihre Karte visueller zu gestalten. Klicken Sie dazu auf Regionen bearbeiten über der Karte oder Regionen in der Haupt-Dropdown-Liste. Wählen Sie jede Region aus und wählen Sie dann die Farbauswahl auf der rechten Seite der Liste der Regionen. Es ist sinnvoll, alle Hex-Codes für Ihre Farben an anderer Stelle zu speichern, damit Sie sie einfach kopieren und einfügen können.
Auch hier bleibe ich bei meiner Blues-Palette:
Nehmen Sie sich etwas Zeit, um diese zu optimieren. Der schwierige Teil besteht darin, die Farben so anzuordnen, dass benachbarte Landkreise oder Zustände unterschiedliche Farben haben!
Nachdem Sie nun Ihre Karte so erstellt haben, wie Sie es möchten, müssen Sie einige Felder hinzufügen, die Sie für Ihre Marker verwenden können. Sie tun dies mit der Datenbank Option im Dropdown-Menü.
Klicke auf das Felder bearbeiten Symbol oben im Fenster, um Felder hinzuzufügen. Ich werde für meine Marker folgendes hinzufügen:
Sie können hinzufügen, was Sie wollen. Nehmen Sie sich etwas Zeit, um darüber nachzudenken, welche Informationen die Besucher Ihrer Website über die Standorte auf Ihrer Karte erfahren möchten. Wenn Sie beispielsweise die Büros Ihres Unternehmens abbilden, möchten die Mitarbeiter einen Namen und eine Adresse sowie möglicherweise Informationen darüber, welche Art von Geschäft dieses Büro bearbeitet oder welche Öffnungszeiten es gibt.
Das wesentliche Feld ist Marker-Ohne diese Option können Sie diese Markierungen nicht zu Ihrer Karte hinzufügen.
Sie können eine Reihe von Feldtypen aus Textfeldern verwenden, um Felder auszuwählen. Das heißt, Sie können vordefinieren, welche Standorttypen Sie hinzufügen und verwenden. Für ein Einzelhandelsunternehmen bedeutet dies, dass Sie auswählen können, welche Ihrer Standorte große Läden, Geschäfte außerhalb der Stadt oder kleine Boutiquen sind.
Beim Bearbeiten des Felds können Sie Hilfetext für andere Personen hinzufügen, die das Feld bearbeiten, und Sie können angeben, ob das Feld durchsuchbar sein soll. Es ist sinnvoll, möglichst viel Textinhalt durchsuchbar zu haben.
Nun zum Spaß!
Ihre Map ist vollständig eingerichtet und Sie verfügen über Ihre Datenbankfelder. Sie müssen diese Markierungen jedoch hinzufügen.
Zuerst müssen Sie die Daten für Ihre Standorte in der Datenbank hinzufügen. Wähle aus Datenbank Klicken Sie in der Dropdown-Liste auf die Registerkarte, wenn Sie nicht bereits vorhanden sind, und klicken Sie dann auf + Zeichen oben rechts, um jede Position der Reihe nach hinzuzufügen.
Füge hinzu, bis du alle hast. Hier sind meine:
Nun, da Sie die Standorte in der Datenbank haben, ist es Zeit, die Markierung für jede einzelne hinzuzufügen.
Beginnen Sie für jeden Ort, die Adresse in das Feld einzugeben Marker Feld. Das Plugin schlägt automatisch einen Ort vor, den Sie eingeben:
Wählen Sie den richtigen Ort aus der Liste aus, die Ihnen das Plugin gibt, und speichern Sie dann Ihren Standort. Wiederholen Sie diesen Vorgang für alle Standorte in Ihrer Datenbank.
Sobald Sie fertig sind, sieht Ihre Liste der Standorte ungefähr so aus:
Sie haben jetzt Ihre Karte, Ihre Standorte und alle Ihre Marker. Aber du bist noch nicht fertig! Der nächste Schritt ist das Konfigurieren von Popovers. Auf diese Weise kann jemand beim Anzeigen der Karte über die hinzugefügten Orte fahren und Ihre Beschreibung und Ihr Bild (oder alles, was Sie zu Ihrer eigenen Karte hinzugefügt haben) sehen..
Wähle aus Aktionen Registerkarte im Dropdown-Menü. Scrollen Sie nach unten zu Markierungsklick Abschnitt und überprüfen Sie die Popover anzeigen Kontrollkästchen Stellen Sie sicher, dass es sich um dieses Feld handelt. Es gibt einige davon auf diesem Bildschirm für verschiedene Popovers.
Wenn Sie dies getan haben, müssen Sie die Vorlage für die Popovers einrichten. Drücke den Verknüpfung mit DB-Popup-Vorlagen einen leeren Bearbeitungsbereich anzeigen. Sie müssen dies mit einer Kombination aus HTML und Feldern aus dem Plugin ausfüllen.
Hier ist der Markup, den ich in meinem verwende:
Name
Beschreibung
#ander Bilder/jeder
Der Text in den geschweiften Klammern ist derselbe Text, der als Feldtitel für jedes der Felder festgelegt wurde, die Sie der Datenbank hinzugefügt haben. Wenn Sie sich nicht erinnern können, was Sie hinzugefügt haben, gehen Sie zurück zum Datenbank Tab und sie werden die Überschriften in der Liste sein.
Der einzige Feldtyp ist Bilder. Hier müssen Sie den Platzhalter hinzufügen, um die Quelle für die Miniaturansicht abzurufen. Der obige Code führt alle durch das Bildfeld hinzugefügten Bilder durch. Wenn Sie also mehr als eines hinzufügen, werden sie alle angezeigt. Weitere Informationen hierzu finden Sie in der Plugin-Dokumentation.
Versuchen Sie nun, auf eine der Markierungen zu klicken, und es erscheint ein Popover:
Tipp: Wenn Sie kein Popover sehen können, kann dies daran liegen, dass Sie das Falsche überprüft haben Popover anzeigen Box oder bearbeiten die falsche Vorlage. Vergewissern Sie sich, dass das Kontrollkästchen, das Sie aktiviert haben, im Kontrollkästchen angezeigt wurde Markierungsklick Abschnitt der Aktionen Registerkarte und dass die Vorlage, die Sie bearbeiten, ist Popupvorlage für DB-Objekte. Sie können Vorlagen aus der Dropdown-Liste in auswählen Vorlagen Tab.
Damit Benutzer die Details Ihrer Standorte sehen und den Inhalt in Ihrer Karte durchsuchen können, müssen Sie das Verzeichnis für die Suche konfigurieren und sicherstellen, dass die Suche aktiviert ist.
Gehe zum Verzeichnis Tab. In dem Verzeichnis umschalten, auswählen Auf. Unter Datenquelle, wählen Datenbank.
Klicke auf das Verzeichniselement Vorlagenlink zum Bearbeiten der für das Verzeichnis verwendeten Vorlage. Sie müssen Ihre Felder auf ähnliche Weise wie beim Hinzufügen der Popovers hinzufügen, außer, dass Sie diesmal nur Platzhalter und kein HTML verwenden. Ich füge nur hinzu Name, Vielleicht möchten Sie jedoch mehr hinzufügen.
Hinweis: Wenn Sie nicht möchten, dass eine Liste von Orten neben Ihrer Karte angezeigt wird, schalten Sie um Verzeichnis zu aus und mach dir keine Sorgen um die Vorlage.
Nun schlagen Sie die sparen Schaltfläche zum Speichern Ihrer Karte. Es ist an der Zeit, es einer Seite Ihrer Website hinzuzufügen.
Öffnen oder erstellen Sie die Seite, der Sie die Karte hinzufügen möchten.
Wo Sie die Karte anzeigen möchten, klicken Sie auf die Schaltfläche Fügen Sie MapSVG ein Symbol, das wie eine schwarze Markierung aussieht.
Wählen Sie die Karte aus, die Sie einfügen möchten, und das Plugin fügt Ihrer Seite einen Kurzcode hinzu, um die Karte anzuzeigen. Speichern Sie jetzt Ihre Seite und testen Sie sie.
Hier ist meine Karte:
Und wenn ich einen der Standorte auswähle, hier der Popover:
Mit dem MapSVG-Plugin können Sie Ihrer Website Karten hinzufügen, die viel mehr Anpassungsoptionen bieten als das einfache Einbetten einer Google-Karte. Wenn Sie möchten, dass Ihre Karte wie eine Google-Karte aussieht, aber die Popovers und das Verzeichnis enthält, können Sie dies tun.
Dieses Tutorial hat eine Möglichkeit gezeigt, wie Sie mithilfe des Plugins eine Karte erstellen können. Um mehr über alle Funktionen zu erfahren und um zu erfahren, wie Sie leistungsfähige benutzerdefinierte Karten hinzufügen können, lesen Sie die Dokumentation.
Accentsconagua