Google Maps auf einer Webseite integrieren

Einführung

In diesem Tutorial wird erklärt, wie man sich auf einer Webseite den Standort des Servers in Google Maps anzeigen lassen kann. Dazu wird gezeigt, wie man über den Metadaten-Service eines Hetzner Cloud Servers den Server-Standort herausfindet und wie man Google Maps auf der eigenen Seite einbauen kann. Die Webseite wird mit dem Webserver Apache mit PHP erstellt.

Voraussetzungen

Grundlegende Kenntnisse über Hetzner Cloud
Hetzner Cloud Server
- LAMP Stack muss bereits installiert sein
  - Vorinstalliert durch die Hetzner Cloud App LAMP Stack oder
  - Manuell installiert (siehe das Tutorial LAMP installieren (EN))
- Muss eine öffentliche IP-Adresse besitzen
Kommandozeilen-Tool

Beispiel-Benennungen

Benutzername: holu
IPv4: <10.0.0.1>

Beachte, dass in allen Beispiel-Befehlen holu mit dem eigenen Benutzernamen ersetzt werden muss und <10.0.0.1> mit der eigenen IP-Adresse.

Schritt 1 - Mit Cloud Server verbinden

LAMP muss bereits installiert sein. Verbinde dich also entweder mit einem Cloud Server mit der Hetzner App LAMP Stack oder nutze das Tutorial Installing LAMP Stack on Ubuntu/Debian (EN), um die Programme selbst zu installieren.

Um die Webseite zu deiner IP-Adresse einzurichten, verbinde dich mit deinem Server:

ssh holu@<10.0.0.1>

Schritt 2 - Ordner öffnen

Sobald du mit deinem Server verbunden bist, kannst du die index.php-Datei bearbeiten. Diese Datei ist sozusagen der Kern jeder Webseite oder Anwendung. Was in dieser Datei steht, wird am Ende auf der Webseite angezeigt. Öffne den Ordner, in dem die Datei gespeichert ist.

Cloud Server mit Hetzner App LAMP Stack

Bei der Hetzner Cloud App wird standartmäßig folgender Pfad genutzt:
```
cd /var/www/<10.0.0.1>
```
Beachte, dass <10.0.0.1> mit der eigenen IP-Adresse ersetzt werden muss.

Sobald man im richtigen Ordner ist, kann man sich mit ls alle Inhalte listen lassen, die darin enthalten sind. Eine Datei sollte index.php heißen. Bearbeite diese, um den Inhalt der Webseite zu verändern:
```
sudo nano index.php
```
Standardmäßig steht in dieser Datei bereits Hello World. Dieser Text sollte auch auf der Webseite sichtbar sein. Der Text kann jetzt gelöscht und im nächsten Schritt durch einen neuen Inhalt ersetzt werden.
Server auf dem LAMP manuell installiert wurde

Bei Apache wird standartmäßig folgender Pfad genutzt:
```
cd /var/www/html
```
Sobald man im richtigen Ordner ist, kann man sich mit ls alle Inhalte listen lassen, die darin enthalten sind. Wenn das oben verlinkte Tutorial verwendet wurde, befinden sich in diesem Ordner vermutlich die Dateien index.html und info.php. Wenn man im Browser die IP-Adresse des Servers eingibt, wird automatisch der Inhalt der Datei index.hmtl angezeigt. Um eine andere Seite anzeigen zu lassen, muss die entsprechende Datei in der URL genannt werden (http://<10.0.0.1>/info.php). In diesem Tutorial arbeiten wir mit index.php. Sollte die Datei index.html bisher noch nicht verwendet werden, kann diese nun gelöscht und mit index.php ersetzet werden. Dadurch wird index.php automatisch zur neuen Startseite.
```
rm index.html
touch index.php
```
Wenn die Datei index.html nicht gelöscht werden kann, ist es trotzdem möglich mit index.php zu arbeiten. In diesem Fall muss in der URL aber der Dateiname ergänzt werden (http://<10.0.0.1>/index.php), um die Webseite zu öffnen.

Öffne nun die PHP-Datei:
```
sudo nano index.php
```

Schritt 3 - Den Standort des eigenen Servers ermitteln

Der Standort des Cloud Servers lässt sich über den Metadaten-Service des Servers herausfinden. Als Output erhält man den Standort fsn1, nbg1, hel1, ash oder hil. Anhand dieser Information kann man sehen in welcher Stadt sich der Server befindet.

Standort	Stadt
`fsn1`	Falkenstein
`nbg1`	Nürnberg
`hel1`	Helsinki
`ash`	Ashburn
`hil`	Hillsboro

Da es sich hierbei um Hetzner-Angaben handelt, kann diese Methode nur bei Hetzner Cloud Servern angewendet werden.

Wenn du einen Hetzner Cloud Server besitzt, füge Folgendes in der PHP-Datei ein:

<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://169.254.169.254/hetzner/v1/metadata/availability-zone");
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($ch, CURLOPT_TIMEOUT, 4);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$datacenter = curl_exec($ch);
curl_close($ch);

$city = "";
if ($datacenter == "fsn1-dc14") {
    $city = "Falkenstein";
} elseif ($datacenter == "nbg1-dc3") {
    $city = "Nürnberg";
} elseif ($datacenter == "hel1-dc2") {
    $city = "Helsinki";
} elseif ($datacenter == "ash-dc1") {
    $city = "Ashburn";
} elseif ($datacenter == "hil-dc1") {
    $city = "Hillsboro";
} elseif ($datacenter === false) {
    die("Kein Hetzner Cloud Server" . PHP_EOL);
}

echo "Der Standort meines Hetzner Cloud Servers: $city" . PHP_EOL;
?>

Die Variable $datacenter gibt den Standort (fsn1, nbg1, hel1, ash oder hil) des Servers an. Dieser wird zuvor über Curl vom Metadaten-Service des Servers abgefragt.
Die Variable $city gibt die genaue Stadt (Falkenstein, Nürnberg, Helsinki, Ashburn oder Hillsboro) des Servers an. Dafür wird mit if definiert, welcher Standort (fsn1, nbg1, hel1, ash, hil) welcher Stadt (Falkenstein, Nürnberg, Helsinki, Ashburn, Hillsboro) entspricht.

Sobald alles eingefügt wurde, kannst du die Datei mit CTRL + X schließen, mit Y speichern und mit ENTER bestätigen.

Schritt 4 - Das Abrufen der Metadaten testen

Damit Curl funktioniert, sollte sichergestellt werden, dass auf dem Server PHP-Curl installiert ist.

Zum Installieren können folgende Schritte durchgeführt werden:
```
sudo apt update
sudo apt install php-curl
sudo service apache2 restart
```
Denke daran Apache nach dem Installieren von PHP-Curl neuzustarten. Ansonsten kann es passieren, dass die PHP-Datei trotz der Installation nicht ausgeführt werden kann.

Anschließend kann das Abrufen der Metadaten getestet werden. Öffne dazu entweder die Webseite (http://<10.0.0.1>) oder nutze in der Kommandozeile folgenden Befehl:

php -f index.php

Achte darauf, dass du im richtigen Ordner bist, bevor du den Befehl ausführst.

Output:

Der Standort meines Cloud Servers: Ashburn

Im Output sollte nun der Standort des Servers stehen. In diesem Beispiel ist das Ashburn. Als nächsten Schritt kann nun die Karte hinzugefügt werden.

Schritt 5 - Karte und Eingabefeld ergänzen

Jetzt da der Standort des Servers bekannt ist, können darunter ein Eingabefeld und eine Weltkarte ergänzt werden. Über das Eingabefeld kann man sich jeden beliebigen Standort auf der Karte anzeigen lassen.

Öffne erneut die PHP-Datei:
```
nano /var/www/<10.0.0.1>/index.php
```
Beachte, dass <10.0.0.1> mit der eigenen IP-Adresse, bzw. dem eigenen Speicherpfad ersetzt werden muss.

Ergänze Folgendes für das Eingabefeld:

<form method="POST">
    <p>
        <input type="text" name="address" placeholder="Adresse eingeben">
    </p>

    <input type="submit" name="submit_address">
</form>

Mit placeholder wird angegeben welcher Text innerhalb des Suchfeldes angezeigt werden soll, bis eine Suche eingegeben wird.

Ergänze Folgendes für Google Maps:

<?php
    if (isset($_POST["submit_address"]))
    {
        $address = $_POST["address"];
        $address = str_replace(" ", "+", $address);
        ?>
        <iframe width="100%" height="500" src="https://maps.google.com/maps?q=<?php echo $address; ?>&output=embed"></i>
        <?php
    }
    else
    {
        ?>
        <iframe width="100%" height="500" src="https://maps.google.com/maps?q=<?php echo $city; ?>&output=embed"></i>
        <?php
    }
?>

Die else-Anweisung gibt an, dass auf Google Maps der Standort angezeigt werden soll, der zuvor als $city definiert wurde. In Schritt 3 wurde $city als die Stadt definiert, in der sich der Cloud Server befindet. Diese Karte wird auf der Webseite als Startbild erscheinen.
Die if-Anweisung gibt an, dass auf Google Maps der Standort angezeigt werden soll, der zuvor als $address definiert wurde. In diesem Fall ist das der Standort, der über das Eingabefeld gesucht wird.

Sobald alles ergänzt wurde, kannst du die Datei mit CTRL + X schließen, mit Y speichern und mit ENTER bestätigen.

Anschließend kannst du die Webseite öffnen (http://<10.0.0.1>), um zu testen ob alles richtig angezeigt wird.

Ergebnis

Im vorangegangenen Tutorial wurde erklärt, wie man PHP-Curl installiert, die index.php-Datei öffnet und bearbeitet, und eine Webseite erstellt, auf welcher der Standort des Cloud Servers und eine Karte angezeigt werden.

Google Maps auf einer Webseite integrieren

Author

Published

Time to read

Table of Contents