So betten Sie Google Maps in eine Website ein: 4 Schritte

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:17

Stimmen Sie für mich in der Maps-Challenge!

Vor kurzem habe ich eine Website erstellt, die Google Maps verwendet. Das Einbetten von Google Maps in meine Website war ziemlich einfach und nicht so schwer. In diesem Instructables zeige ich Ihnen, wie einfach es ist, Google Maps in Ihre Website einzubetten.

Um ehrlich zu sein, habe ich nur zum Spaß Google Maps in meine Website eingebettet. Während der Quarantäne gibt es nicht viel zu tun. Warum also nicht eine Website erstellen, die Google Maps verwendet, und dann den Leuten die Schritte zeigen, die ich beim Erstellen dieser Website unternommen habe.

Nun muss ich sagen, Sie müssen ein oder zwei Dinge über HTML und CSS wissen, um Google Maps in Ihre Website einzubetten. Wenn Sie keine Ahnung von HTML oder CSS haben, gehen Sie zu

Hinweis: Ich bin in keiner Form oder Form mit W3Schools verbunden. Es ist nur eine Website, die ich beim Erlernen von HTML und CSS als hilfreich empfunden habe.

Lieferungen

• Texteditor (wird verwendet, um Ihre Website anzupassen und den Inhalt auf Ihrer Website bereitzustellen).
• Google Maps (was in Ihre Website eingebettet wäre).
• Grundlegendes Verständnis von HTML und CSS (dies sind die folgenden Programmiersprachen, die bei der Anpassung Ihrer Website und der Bereitstellung von Inhalten auf Ihrer Website verwendet werden).

Schritt 1: Stellen Sie Inhalte auf Ihrer Website bereit

Gehen Sie zu Ihrer Texteditor-Software auf Ihrem Computer. Da ich beispielsweise ein Windows habe, sollte ich zum Notepad gehen. Nachdem Sie zu Notepad gegangen sind, geben Sie Folgendes ein:

Google Maps

Google Maps

Nachdem Sie Folgendes in Notepad eingegeben haben, gehen Sie zu Google Maps, wo Sie später den Code erhalten, mit dem Sie Google Maps in Ihre Website einbetten können.

Hier ist der Link für Sie, um zu Google Maps zu gelangen:

Schritt 2: Betten Sie Google Maps in Ihre Website ein

Wenn Sie sich in Google Maps befinden, klicken Sie auf die Schaltfläche "Menü" und suchen Sie dann nach "Karte teilen oder einbetten". Sobald Sie "Karte teilen oder einbetten" sehen, klicken Sie darauf. Nachdem Sie darauf geklickt haben, sollten Sie "Link senden" und "Karte einbetten" sehen. Klicken Sie nun auf "Karte einbetten", nachdem Sie auf "Karte einbetten" geklickt haben, sollten Sie nun einen Abwärtspfeil links neben einem Textfeld sehen, mit dem Sie auswählen können, wie groß oder klein die Karte sein soll. Kopieren Sie den Text in das Feld. Und fügen Sie den Text in den HTML-Code Ihrer Website ein.

Schritt 3: Passen Sie Ihre Website an

Gehen Sie zurück zu Ihrer Texteditor-Software auf Ihrem Computer und geben Sie Folgendes ein:

Google Maps-Text{background-color:rgb(129, 207, 224, 1);}

Google Maps

Das Style-Tag wird verwendet, um Ihre Website anzupassen. Jetzt werde ich Sie darauf hinweisen, dass dieser Schritt CSS verwendet. Sie können Folgendes eingeben, damit Ihre Website genau wie meine Website aussieht.

Wenn Sie fertig sind, speichern Sie Ihre Datei als "Google Maps.html". Vergessen Sie nicht den HTML-Teil, denn wenn Sie diesen Teil nicht einschließen, können Sie keine Website erstellen.

Schritt 4: Sehen Sie sich Ihr Endprodukt an

Sobald Sie alle Schritte in diesem Instructables befolgt haben, werfen Sie einen guten Blick auf Ihr Endprodukt. Wenn Sie mit Ihrem Endprodukt zufrieden sind, ist das großartig. Aber wenn Sie mit Ihrem Endprodukt nicht zufrieden sind, gehen Sie zurück in Ihren Notizblock und versuchen Sie, Ihr Endprodukt zu reparieren, damit Sie das nächste Mal, wenn Sie sich Ihr Endprodukt genau ansehen, mit dem, was Sie erstellt haben, zufrieden sein werden deine Hände.

Wenn Sie meinen Quellcode anzeigen möchten, finden Sie ihn am Ende dieses Instructables. Vielen Dank für das Betrachten meiner Instructables und glückliche Codierung!

Zur Erinnerung: Bitte stimmt für mich in der Maps Challenge ab!