Google Maps

• Einrichtung Konto
• Google Cloud Konto einrichten
• API KEY erstellen:
• Code Beispiele
• Java Script HTTP Beispiel

Einrichtung Konto

Google Cloud Konto einrichten

Beschreibung:

Um die Google Webdienste in Javascript zu nutzen, brauchen wir einen API key.
Diesen erstellen wir uns mit Unserem google Konto unter :
https://cloud.google.com

Konto erstellen bzw. Anmelden:

Dann auf Kostenlos testen

Nun Adressdaten und Zahlungsdaten angeben.
Dann auf kostenlos starten klicken.

Nun werden uns noch ein paar Fragen über uns selbst gestellt und danach sind wir auf der Oberfläche, fertig ist die Anmeldung und es kann weiter mit dem API Key gehen.
Da ich mich gerade angemledet hab, hab ich sogar noch testzeitraum Guthaben ;-)

API KEY erstellen:

Beschreibung:

Um google Maps benutzen zu können brauchen wir einen API Key

API KEy erstellen:

Wir geben oben in die Suche maps ein und wählen API und Dienste

Nun bekommen wir unseren API KEy.
Alle Haken drin lassen.

50.000 Anfragen sind im Monat kostenlos.

Code Beispiele

Java Script HTTP Beispiel

Beschreibung:

Ein HTTP Java Script Beispiel

function httpGet(url, onSuccess, onError) {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);

    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
            try {
                const response = JSON.parse(xhr.responseText);
                if (onSuccess) {
                    onSuccess(response);
                }
            } catch (error) {
                console.error("Fehler beim Verarbeiten der HTTP-Antwort:", error);
                if (onError) {
                    onError(error);
                }
            }
        } else {
            console.error("HTTP-Fehler:", xhr.status, xhr.statusText);
            if (onError) {
                onError(xhr.statusText);
            }
        }
    };

    xhr.onerror = function () {
        console.error("Netzwerkfehler bei der HTTP-Anfrage.");
        if (onError) {
            onError("Netzwerkfehler");
        }
    };

    xhr.send();
}


function fetchSuburbFromGoogle() {
    const street = "Longholter Straße 30";
    const postcode = "26817";
    const city = "Rhauderfehn";

    if (!street || !postcode || !city) {
        echo("Fehler", "Bitte füllen Sie alle erforderlichen Felder aus (Straße, Postleitzahl, Ort).");
        return;
    }

    const apiKey = "DEIN_GOOGLE_API_KEY"; // Hier den API-Schlüssel einfügen
    const query = `${street}, ${postcode}, ${city}`;
    const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(query)}&key=${apiKey}`;

    httpGet(
        url,
        function (data) {
            if (data.status === "OK" && data.results.length > 0) {
                // Der erste Treffer aus der Google-API
                const result = data.results[0];
                const addressComponents = result.address_components;

                // Ortsteil finden
                const suburbComponent = addressComponents.find(component =>
                    component.types.includes("sublocality") || component.types.includes("locality")
                );

                const suburb = suburbComponent ? suburbComponent.long_name : null;

                if (suburb) {
                    echo(suburb);
                    echo("Erfolg", `Ortsteil: ${suburb}`);
                } else {
                    echo("Info", "Dieser Ort hat keinen spezifischen Ortsteil.");
                    echo("");
                }
            } else {
                echo("Warnung", "Keine Ergebnisse für die eingegebene Adresse gefunden.");
                echo("");
            }
        },
        function (error) {
            console.error("Fehler bei der Google-Anfrage:", error);
            echo("Fehler", "Die Anfrage an Google Maps ist fehlgeschlagen.");
        }
    );
}
fetchSuburbFromGoogle()