Die meisten Unternehmen finden es nützlich und sogar notwendig, eine interaktive Karte auf der Website zu platzieren, damit Besucher Sie leichter finden können. Dies gilt insbesondere für Großstädte: Ihre Kunden finden sich viel leichter zurecht, wenn sie den Standort des Büros visuell sehen, sich die Route überlegen und die Fahrzeit berechnen können.
Fügen Sie Ihrer Website eine interaktive Karte hinzu, zum Beispiel die weltberühmte Suchmaschine Google. Dies ist über den kostenlosen Dienst Google Maps möglich.
Schritt 1. Holen Sie sich den Code, um eine Google-Karte auf der Website zu installieren
Um also eine interaktive Google-Karte auf Ihrer Website zu platzieren, benötigen Sie zunächst einen Kartencode mit einer Markierung Ihrer Organisation. Geben Sie dazu auf GoogleMaps die Adresse oder den Firmennamen in die Suchleiste ein oder suchen Sie manuell notwendiges Zuhause auf der Karte und platzieren Sie die Markierung mit einem Mausklick.
Sobald die Karte angepinnt ist, klicken Sie auf das Menüsymbol neben der Suchleiste.
Wählen Sie im sich öffnenden Menü den Punkt "Link / Code".
Wechseln Sie im sich öffnenden Fenster auf die Registerkarte "Code", wählen Sie die Größe der Karte aus und kopieren Sie den vorgeschlagenen HTML-Code.
Schritt 2. So fügen Sie den 2gis-Kartencode in die Site ein
Der Code wird also empfangen, es bleibt nur, ihn auf der gewünschten Seite der Site zu platzieren. Wir haben uns entschieden, die Karte dem Abschnitt "Kontakte" hinzuzufügen. Wir gehen zum Admin-Panel von "Nubex", wählen Sie in der Systemsteuerung den Abschnitt "Seiten", suchen Sie den gewünschten Abschnitt in der Liste und klicken Sie auf "Bearbeiten".
Wir arbeiten mit einem Textblock. Drücke den Knopf "Eine Quelle" um in den Code-Bearbeitungsmodus zu gelangen. Fügen Sie den Code von GoogleMaps in das Textfeld ein und speichern Sie die Änderungen.
Wir gehen auf die Seite "Kontakte" unserer Website und freuen uns über die Updates!
Dank Google Maps kann jeder Besucher Ihrer Website den Standort der Organisation sehen, eine Wegbeschreibung mit dem Auto abrufen, auf öffentlicher Verkehr oder zu Fuß, sowie Ihre Adresse in Ihren Notizen speichern.
Neben Karten von Google können Sie auch Karten von und 2gis auf der Seite platzieren, darüber werden wir in den entsprechenden Artikeln berichten.
Beim Erstellen einer Site ist es häufig erforderlich, eine Karte einzufügen, die den Standort Ihrer Organisation anzeigt. Tatsächlich ist die Karte auf der Website sehr praktisch: vor allem für Ihre Benutzer. Sie können sofort, ohne Ihre Ressource zu verlassen, sehen, wie sie Sie finden, was sich in der Nähe befindet und wie weit sich Ihre Organisation von ihrem Standort entfernt befindet. Nicht jeder weiß, wie man eine Karte in eine Website einfügt. Und das geht ganz, ganz einfach!
In diesem Artikel werde ich Ihnen sagen und zeigen, wie Sie in wenigen Minuten eine Karte mit der gewünschten Position auf den Seiten Ihrer Site einfügen können.
So fügen Sie eine Karte in eine Website ein
Um eine Karte in die Site einzufügen, verwenden wir also einen Dienst von Google.
1. Als erstes müssen wir auf die Google Maps-Website gehen.
2. Um nun alle benötigten Operationen durchzuführen, gehen wir besser zum "Classic Interface".
Klicken Sie dazu auf das Fragezeichen-Symbol in der unteren rechten Ecke des Bildschirms.
Vor Ihnen öffnet sich ein kleines ausziehbares Menüfeld, in dem Sie "Klassische Benutzeroberfläche" auswählen müssen.
Danach erscheint ein weiteres Popup-Fenster, in dem Sie gefragt werden, warum Sie die Classic-Oberfläche verwenden möchten. Sie können einen der Punkte ankreuzen, oder Sie können ihn nicht ankreuzen, sondern sofort auf den blauen Link "Klassische Benutzeroberfläche" direkt darunter klicken.
Danach werden Sie zur klassischen Google Maps-Oberfläche weitergeleitet, wo alles enthalten ist, was wir brauchen, um die Karte auf der Site-Seite zu platzieren.
3. Geben Sie nun die gewünschte Adresse in das Adressfeld ein. Vergessen Sie nicht, dass Sie das Land, die Stadt, die Straße und das Haus angeben müssen, dh die vollständige Adresse.
Als Ergebnis erhalten Sie Ihren Standort auf der Karte, markiert mit einer roten Markierung.
4. Jetzt müssen wir den Einbettungscode in unsere Webseite einfügen und einige Einstellungen vornehmen.
Um den Einbettungscode zu erhalten, müssen wir auf das Symbol klicken, um den Link oder Code zu erhalten (er befindet sich rechts neben dem Symbol mit dem Drucker).
5. Hier interessiert uns der HTML-Code zum Hinzufügen zur Website (zweites Feld).
Auch in diesem Code sehen Sie einige Parameter, die geändert werden können. Dies sind die Abmessungen der Karte, dh ihre Höhe und Breite. Sie können auch einen Rahmen für die Karte festlegen. Der Standardgrenzwert ist null, aber Sie können dies ändern, indem Sie beispielsweise eins eingeben.
Ändern Sie diese Parameter bei Bedarf, obwohl Sie dies über den Code der Webseite tun können. Wenn nicht notwendig, kopieren Sie einfach den gesamten Code.
6. Jetzt müssen Sie nur noch den kopierten Code an der Stelle Ihrer Webseite einfügen, an der Sie die Karte sehen möchten.
Sie können einen separaten „div“-Block speziell für Ihre Map erstellen, den Sie später über die Stylesheet-Datei stylen können.
Ich werde meine Karte gleich hier einführen. Sehen Sie, wie es aussehen wird.
Als Ergebnis sieht der Benutzer Ihren Standort mit einer Markierung markiert. Er wird in der Lage sein, die Karte zu verschieben, hinein- und herauszuzoomen.
Außerdem wird über der Markierung ein Fenster mit Ihrer Adresse angezeigt. Und unten finden Sie einen Link, um die Karte in einem größeren Maßstab anzuzeigen.
Alles ist also sehr einfach, funktional und bequem.
Nutzen Sie es für Ihre Gesundheit!
Ich würde mich freuen, wenn diese Lektion für Sie nützlich ist. Als Dankeschön hinterlassen Sie Ihre Kommentare und teilen Sie den Artikel über die Schaltflächen soziale Netzwerke, die sich direkt darunter befinden.
Abonnieren Sie auch das Blog-Update, wenn Sie noch nicht abonniert sind. Ich verspreche Ihnen viele nützliche Materialien.
Anna Kotelnikova war bei Ihnen.
Viel Glück und bis bald.
Hallo, ich möchte diesen Artikel mit einer kleinen Anmerkung beginnen.
Diejenigen, die nicht nur die Entwicklung, sondern auch die Förderung von Websites lieben, wissen, dass die Anforderungen an Websites von Jahr zu Jahr wachsen, Suchmaschinen versuchen, Müllseiten auszusortieren und sie so relevant wie möglich zu halten. Beim Durchsehen der letzten Konferenzen zur Förderung kommerzieller Websites ist mir eine Tatsache aufgefallen, die in allen Fällen ähnlich ist - dies ist das Design der Kontaktseite. Vorbei sind die Zeiten, in denen diese Seite nur wenige Telefonnummern und ein Kontaktformular enthielt. Jetzt müssen Sie die Kontaktdaten so informativ wie möglich angeben. In diesem Fall können Sie auf eine dynamische Standortkarte Ihres Büros einfach nicht verzichten. Sie wurde Bestandteil jede Kontaktseite einer kommerziellen Site.
Yandex hat dem Entwickler in dieser Richtung eine eigene Lösung zur Verfügung gestellt – nämlich Yandex Maps Constructor, mit dem Webmaster problemlos beliebige Karten zu ihrer Website hinzufügen können.
Kommen wir nun direkt zu den Aktionen.
1.) Gehen Sie zuerst zum Kartenkonstruktor selbst - http://api.yandex.ru/maps/tools/constructor/.
Sie sehen eine Karte und ein Feld, in dem Sie die gewünschte Adresse angeben können.
Sie können eine Karte erstellen, auch ohne sich bei Yandex anzumelden.
2.) Geben Sie die gewünschte Adresse ein, danach erscheint eine Aufforderung mit vollständiger Name Straßen, Städte und Hausnummern.
3.) Nach Auswahl der Adresse können Sie eine Beschreibung für das Tag angeben sowie seine Farbe auswählen. Drücken Sie nach den Einstellungen die Schaltfläche "Ok". Und wir gehen zum Ende der Seite.
5.) Kopieren Sie den bereitgestellten Code und fügen Sie ihn an der von uns benötigten Stelle auf der Website ein.
Ein paar Anmerkungen
- Diese Methode zum Einfügen einer Yandex-Karte in die Site ist für jedes CMS geeignet: Joomla, Opencart, WordPress und andere.
- Oft schneidet ein visueller Editor, zum Beispiel in Joomla, den Code. Es empfiehlt sich also, ohne Editor mit der Kontaktseite zu arbeiten. Oder fügen Sie die Karte nach allen visuellen Bearbeitungen ein.
Kopieren Sie den Code der erstellten Karte in eine Textdatei. Wenn der Code beim Bearbeiten der Kontaktseite verzerrt ist, können Sie ihn jederzeit wiederherstellen.
Das war's für heute, in den nächsten Artikeln werde ich weiterhin Spickzettel für die technische Arbeit mit Websites erstellen.
Wenn Sie wünschen Einfügung gute Karte zur Webseite mit Standortangabe darauf, zum Beispiel Ihr Büro, Lager, dann nutzen Sie so bekannte Webtools wie Sitemap von Yandex oder Sitemap von Google.
In diesem Artikel erfahren Sie, warum und wie Sie eine Yandex-Karte in die Site einfügen.
So sieht zum Beispiel die Yandex-Karte aus, die wir auf der Site eingefügt haben Einkaufszentrum... Es hätte detaillierter sein können, mit Bildern von Häusern auf dem Diagramm, aber in dieser Fall Wichtiger war es, die Lage des Einkaufszentrums im Verhältnis zu den nächsten Dörfern anzugeben, daher wurde ein kleiner Maßstab gewählt.
Wozu dient die Sitemap?
Sie könnten lächeln, nachdem Sie diese scheinbar rhetorische Frage gelesen haben. "Eine Karte wird benötigt, damit Besucher wissen, wo wir sind" ist eine einfache Antwort, die zu einfach ist, um die Rolle einer Karte zu verstehen, insbesondere für eine kommerzielle Site. Hier sind einige wichtige Aspekte Verfügbarkeit der Karte auf der Website:
- Zahlen Besondere Aufmerksamkeit: Eine Karte zu haben, erhöht das Vertrauen in Ihre Ressource erheblich. Die visuelle Anzeige des Standorts des Unternehmens, Büros, Ladens befreit einen potentiellen Kunden unbewusst (lindert Ängste wie: "Was ist, wenn sie betrügen und verschwinden?"), was bedeutet, dass es die Wahrscheinlichkeit erhöht, dass ein Seitenbesucher Ihr echter Kunde.
- Das Vorhandensein einer interaktiven Karte (im Gegensatz zu einem Kartenbild) ermöglicht es dem Benutzer, sich besser im Gelände zu orientieren, die nächste U-Bahn zu sehen, damit Autofahrer die Route bei den entfernten Annäherungen an das Objekt überprüfen können. Darüber hinaus können Sie mit der interaktiven Karte das Gelände aus dem Weltraum betrachten.
- Nun, natürlich wird eine Karte auf der Site benötigt, damit Site-Besucher und Kunden den Standort Ihres Geschäfts, Büros oder Lagers kennen.
So fügen Sie eine Yandex-Karte in eine Website ein (Schritt-für-Schritt-Anleitung)
Sollte nutzen Yandex.Maps API-Konstruktor.
In diesem Artikel geben wir eine ungefähre Schritt für Schritt Anweisungen, die Ihnen hoffentlich beim Einfügen einer Yandex-Karte in Ihre Site helfen wird:
Schritt 1. Erstkonfiguration der Yandex-Karte für die Site:
- Öffnen Sie die Yandex.Maps-Designerseite für die Site.
- Suchen Sie den gewünschten geografischen Standort auf der Karte nach Adresse oder manuell (mit dem Skalierungsschieberegler und Verschieben der Karte mit der Maus).
- Wählen Sie eine Skala, die für Ihre Arbeit geeignet ist. Es ist besser, den endgültigen Maßstab am Ende der Arbeit festzulegen. Wir zeichnen Beschriftungen auf der Karte, Linien (Zufahrtsstraßen) und Umrisse von Gebäuden oder Territorien.
- Geben Sie den Namen der zukünftigen Karte in das entsprechende Feld ein.
- Kommen wir zum Service-Toolkit: Schaltflächen zum Zeichnen von Punkten (Beschriftungen auf der Karte), Linien, Polygonen (Konturen) und Kartendimensionen.
Schritt 2. Punkte (Markierungen) auf der Karte zeichnen:
- Klicken Sie auf die Schaltfläche zum Zeichnen von Punkten.
- Wir setzen eine Markierung (Punkt) an der Stelle, die wir brauchen. Zum Beispiel in Ihrem Bürogebäude. Mit einer Sitemap von Yandex können Sie nicht ein, sondern mehrere Tags einfügen (z. B. wenn Sie mehrere Geschäfte, Lager oder Büros haben).
- Wir fahren mit der Einstellung der Eigenschaften des installierten Etiketts fort (Einfügen von Text, Auswählen einer Farbe usw.).
Schritt 3. Konfigurieren der Eigenschaften des auf der Karte installierten Labels:
- Wir klicken direkt auf das von uns gezeichnete Etikett.
- Wählen Sie im sich öffnenden Fenster die gewünschten Eigenschaften aus (Farbe, Nummer des Tags auf der Karte), schreiben Sie den gewünschten Text (später ist der Text für den Benutzer sichtbar, wenn er auf den Tag klickt).
- Jedes Label kann im entsprechenden Eigenschaftsfeld entfernt werden.
- Wir haben also ein Etikett Ihres Büros in die Yandex-Karte für die Site eingefügt, ihre Eigenschaften eingerichtet, und jetzt fahren wir mit dem Zeichnen von Linien fort. Zum Beispiel die Linien der Auffahrt zum Büro.
Schritt 4. Linien auf der Karte zeichnen:
- Klicken Sie auf die Schaltfläche zum Zeichnen von Linien.
- Durch Klicken auf die Karte erhalten wir eine Polylinie einer beliebigen Flugbahn. Es kann verwendet werden, um ein beliebiges Objekt zu skizzieren oder eine Route für die Annäherung an das Objekt zu zeichnen.
- Durch Verschieben der quadratischen und runden Griffe können Sie die Form der Linie bearbeiten.
- Analog zu Beschriftungen erscheint beim Anklicken einer Linie ein Eigenschaftsfenster, in dem Sie Farbe, Dicke, Transparenz der Linie einstellen sowie den Text eingeben können, der dem Benutzer angezeigt wird.
- Kommen wir nun zum Zeichnen von Polygonen.
Schritt 5. Zeichnen von Polygonen, die mit Umrissfarbe gefüllt sind:
- Klicken Sie auf die Schaltfläche zum Zeichnen von Polygonen.
- Im Gegensatz zu Linien, mit denen auch beliebige Polygone umrissen werden können, handelt es sich bei diesen Polygonen um Konturen mit gefüllter Mitte.
- Durch Klicken auf die Karte können Sie ein beliebiges gefülltes Polygon zeichnen. Die Technik zum Zeichnen, Bearbeiten und Festlegen von Eigenschaften ist dieselbe wie beim Zeichnen von Linien.
- Kommen wir nun zur Größenänderung der Karte.
Schritt 6. Größe der Sitemap ändern:
- Klicken Sie auf die Schaltfläche Größe ändern.
- Durch Ziehen der quadratischen Ziehpunkte entlang des Umrisses der Karte können Sie die Größe nach Bedarf ändern. Es ist einfach.
- Fahren Sie mit der endgültigen Kartenerstellung fort.
Schritt 7. Abrufen des Kartencodes für die Site (Yandex):
- Wir geben der Karte ihr endgültiges Aussehen, indem wir den endgültigen Kartenmaßstab und die endgültige Position (Koordinaten) festlegen.
- In diesem Stadium kann die Erstellung einer Karte für den Standort (Yandex) als abgeschlossen betrachtet werden. Klicken Sie auf den großen gelben Button "Speichern und Code abrufen".
- Auch nach dem Speichern der Karte können Sie jederzeit zur Bearbeitung zurückkehren.
- Bitte beachten Sie, dass die Karte nicht nur ein Diagramm, sondern auch ein Foto aus dem Weltraum, ein Hybrid oder ein Element der "People's Map" sein kann.
- Darüber hinaus steht es Ihnen frei, die Karte interaktiv oder als einfaches Bild zu gestalten. Eine interaktive Karte ist interessanter und funktionaler, kann aber länger laden als ein einfaches Bild. Es ist deine Entscheidung.
- Sie können eine Yandex-Karte in Ihre Site einfügen, indem Sie den HTML-Code der Karte an der gewünschten Stelle auf der Seite platzieren.
Vielen Dank an alle Leser, die sich für unsere Schritt-für-Schritt-Anleitungen interessieren.
Das Erstellen einer Karte für eine Site von Yandex ist eine einfache Aktion, die keine besonderen Kenntnisse und Fähigkeiten erfordert, vor dem Hintergrund viel komplexerer Probleme bei der Site-Erstellung. Wenn Sie beim Erstellen Ihrer Website auf schwerwiegendere Schwierigkeiten stoßen, kontaktieren Sie uns bitte. Wir werden unser Bestes geben, um Ihre Probleme zu lösen!
Wenn Ihnen unsere Anleitung gefallen hat, können Sie sie Ihren Freunden und Bekannten empfehlen. Die "Social Buttons" befinden sich auf der rechten Seite. Das ist unser kleines Eigeninteresse.
