Karten sind ein wesentlicher Aspekt jeder Unternehmenswebsite. Auch wenn Sie vollständig internetbasiert sind, möchten Kunden immer noch wissen, wer Sie sind und wo Sie leben. Google Maps ist jetzt die Standardeinstellung für viele Websites, da es am einfachsten zu verwenden, am genauesten zu sein scheint und kostenlos ist. Am Ende dieses Tutorials wissen Sie genau, wie Sie eine ansprechende Google Map in Ihre Website einbetten können.
Standardmäßig reagiert Google Maps nicht immer und kann daher möglicherweise nicht auf unterschiedliche Bildschirmgrößen skaliert werden. Abhängig davon, ob Sie ein WordPress-Plugin verwenden oder es selbst mithilfe von Code einbetten, müssen Sie möglicherweise einige Zeilen CSS hinzufügen, damit die Karte reagiert.
Sich anpassendes Webdesign
Responsive ist hier ein Schlüsselbegriff. Es wird das Webdesign beschrieben, das die Benutzererfahrung und das Gerät berücksichtigt, um sicherzustellen, dass es unabhängig von dem Gerät, mit dem Sie auf die Website zugreifen, identisch ist. Beispielsweise sollte eine responsive Website die gleiche Erlebnisqualität bieten, unabhängig davon, ob Sie sie auf einem Desktop, Tablet oder Smartphone besuchen.
Dazu muss sich die Website an unterschiedliche Auflösungen, Bildschirmgrößen und Berührungen anpassen.
Einbetten einer ansprechenden Google Map in eine Website
Ich kenne drei Möglichkeiten, um Google Maps in eine Website einzubetten. Wenn Sie ein WordPress-Theme verwenden, ist die Funktion möglicherweise bereits integriert. Sie können auch ein Plugin verwenden oder Code direkt von Google in eine beliebige Website einbetten. Die erste und die zweite Option eignen sich hervorragend für WordPress-Benutzer. Andere CMS verwenden auch Plugins, sodass Sie dort behandelt werden. Die letzte Option, Code zu verwenden, sollte auf den meisten Websites funktionieren, unabhängig davon, wie sie erstellt wurden.
Verwenden Sie ein WordPress-Design, um eine ansprechende Google Map einzubetten
Einige WordPress-Themes haben eine Funktion speziell für Google Maps. Da Karten für moderne Websites von grundlegender Bedeutung sind, wurden sie von einigen Designern direkt in ihre Designs implementiert. Wenn Ihr Thema über eine Kartenfunktion verfügt, benötigen Sie wahrscheinlich eine Google Maps-API, damit es funktioniert. Sie fügen die API zu den Designoptionen hinzu und sie wird direkt mit Google kommunizieren, um die Karte bei jedem Besuch zu erstellen.
- Besuchen Sie diese Seite auf der Google-Website, um den API-Prozess zu starten.
- Wählen Sie die blaue Schaltfläche Erste Schritte.
- Wählen Sie das dreizeilige Menüsymbol oben links auf dem neuen Bildschirm.
- Wählen Sie APIs & Services und dann Credentials.
- Wählen Sie Create Credentials und dann API Key.
- Wählen Sie Restrict Key und dann HTTP Referrer.
- Wählen Sie Speichern.
- Kopieren Sie den API-Schlüssel und fügen Sie ihn in die Seite mit den Entwurfsoptionen ein, für die er erforderlich ist.
Sobald Sie den API-Schlüssel haben, können Sie Google Map mithilfe der Designtools für Themen in Ihre Website implementieren. Solange das Thema anspricht, sollte es auch die Karte sein.
Verwenden Sie ein Plugin, um eine ansprechende Google Map einzubetten
WordPress verwendet Plugins, Joomla verwendet Erweiterungen, Drupal verwendet Module oder Plugins und andere CMS verwenden ähnliche Namenskonventionen. In beiden Fällen beziehen sich Plugins auf modulare Elemente, die Sie an Ihr Kern-CMS anschrauben können, um Funktionen hinzuzufügen. Ein nützliches Feature ist eine Google Map. Wenn Ihr Website-Design kein Maps-Element enthält und Sie den Code nicht selbst erstellen möchten, ist ein Plugin das nächstbeste.
- Navigieren Sie in WordPress zu Plugins und Add New.
- Suchen Sie nach Google Maps und wählen Sie ein Plugin aus, das Ihnen gefällt.
- Aktiviere es in den Plugins und gehe zu den Einstellungen.
- Fügen Sie die oben erstellte Google Maps-API hinzu und klicken Sie auf Speichern.
- Implementieren Sie das Plugin an der Stelle, an der die Karte angezeigt werden soll.
Andere CMS unterscheiden sich geringfügig in der Benennung und in den Menüpositionen, das Prinzip ist jedoch weitgehend dasselbe. Für die meisten, wenn nicht alle Karten-Plug-ins ist die Google Maps-API erforderlich.
Verwenden Sie Code, um eine ansprechende Google Map einzubetten
Wenn Sie kein WordPress oder anderes CMS verwenden, können Sie dennoch eine ansprechende Google Map einbetten. Sie müssen nur Code anstelle eines Moduls verwenden. Es dauert ein bisschen mehr Arbeit, liefert aber die gleichen reaktionsschnellen Karten.
- Besuchen Sie Google Maps und navigieren Sie, bis die anzuzeigende Karte den Bildschirm ausfüllt.
- Wählen Sie den blauen Link "Teilen" und kopieren Sie den Code aus "Karte einbetten".
- Fügen Sie Ihren spezifischen Einbettungscode zwischen und dem unten stehenden Code hinzu.
- Fügen Sie den Code in den HTML-Code Ihrer Webseite ein, auf der Sie die Karte anzeigen möchten.
- Speichern Sie Ihre Änderungen.
Der Code:
Dies ist nicht mein Code, ich habe ihn online gefunden, aber auf meiner Website getestet. Es funktioniert wie ein Zauber und sollte funktionieren, egal ob Sie ein CMS, HTML, Hugo oder eine der vielen anderen Websitesprachen oder Seitentools verwenden.
