Diese Seite wurde von der Cloud Translation API übersetzt.

Dienst für die Suche in der Nähe mit der Google Maps Platform (JavaScript) erstellen

1. Hinweis

Hier erfahren Sie, wie Sie mit der Google Maps Platform Maps und Places APIs eine lokale Suche für Ihr Unternehmen erstellen können. Damit wird der Standort des Nutzers orten und interessante Orte in der Nähe angezeigt. Die App unterstützt die Standortbestimmung, Place Details und Place Photos.

Voraussetzungen

Grundkenntnisse in HTML, CSS und JavaScript
Ein Projekt mit einem Rechnungskonto. Folgen Sie der Anleitung im nächsten Schritt, wenn Sie keines haben.
Für den folgenden Aktivierungsschritt müssen Sie die Maps JavaScript API und die Places API aktivieren.
Ein API-Schlüssel für das obige Projekt.

Einführung in Google Maps Platform

Wenn du die Google Maps Platform noch nicht verwendet hast, folge der Einführung in die Google Maps Platform oder folge der Anleitung unter Erste Schritte mit der Google Maps Platform-Playlist.

Erstellen Sie ein Rechnungskonto.
Projekt erstellen
Aktivieren Sie die im vorherigen Abschnitt aufgeführten Google Maps Platform APIs und SDKs.
Generieren Sie den API-Schlüssel.

Aufgabe

Webseite mit Google-Karte erstellen
Karte auf den Standort des Nutzers zentriert
Orte in der Nähe finden und die Ergebnisse als anklickbare Markierungen anzeigen
Mehr Details zu jedem Ort abrufen und anzeigen

Voraussetzungen

Ein Webbrowser wie Google Chrome (empfohlen), Firefox, Safari oder Internet Explorer
Ihr bevorzugter Text- oder Code-Editor

Beispielcode abrufen

Öffnen Sie die Befehlszeile (Terminal unter macOS oder Befehlszeile) und laden Sie den Beispielcode mit dem folgenden Befehl herunter:

git clone https://github.com/googlecodelabs/google-maps-nearby-search-js/

Wenn das nicht funktioniert, klicken Sie auf die folgende Schaltfläche, um den gesamten Code für dieses Codelab herunterzuladen und die Datei zu entpacken:

Code herunterladen

Wechseln Sie in das Verzeichnis, das Sie gerade geklont oder heruntergeladen haben.

cd google-maps-nearby-search-js

Die Ordner stepN enthalten den gewünschten Endstatus der einzelnen Schritte dieses Codelabs. Sie sind als Referenz verfügbar. Führe die gesamte Codierung in dem Verzeichnis work aus.

2. Karte mit Standardcenter erstellen

Die Webkarte muss drei Schritte ausführen, um eine Google-Karte zu erstellen:

HTML-Seite erstellen
Karte hinzufügen
API-Schlüssel einfügen

1. HTML-Seite erstellen

Im Folgenden sehen Sie die Karte, die in diesem Schritt erstellt wurde. Die Karte ist zentriert auf dem Sydney Opera House in Sydney, Australien. Wenn der Nutzer die Berechtigung zum Abrufen seines Standorts verweigert, wird in der Karte standardmäßig auf diesen Standort zugegriffen, jedoch weiterhin interessante Suchergebnisse.

Ändern Sie die Verzeichnisse in den Ordner work/. Nehmen Sie im restlichen Codelab die Änderungen in der Version im Ordner work/ vor.

cd work

Erstellen Sie im Verzeichnis work/ mit Ihrem Texteditor eine leere Datei mit dem Namen index.html.
Kopieren Sie den folgenden Code in index.html.

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Sushi Finder</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    #map {
      height: 100%;
      background-color: grey;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* TODO: Step 4A1: Make a generic sidebar. */
  </style>
</head>

<body>
  <!-- TODO: Step 4A2: Add a generic sidebar -->

  <!-- Map appears here -->
  <div id="map"></div>

  <!-- TODO: Step 1B, Add a map -->
</body>

</html>

Öffnen Sie die Datei index.html in Ihrem Webbrowser.

open index.html

2. Karte hinzufügen

In diesem Abschnitt erfahren Sie, wie Sie die Maps JavaScript API in Ihre Webseite laden und eigene JavaScript-Elemente schreiben, mit denen der Webseite eine Karte hinzugefügt wird.

Fügen Sie diesen Skriptcode hinzu, wenn nach dem div-Element (map) und vor dem schließenden Tag </body> „“ angezeigt wird.

step1/index.html

<!-- TODO: Step 1B, Add a map -->
<script>
    /* Note: This example requires that you consent to location sharing when
     * prompted by your browser. If you see the error "Geolocation permission
     * denied.", it means you probably did not give permission for the browser * to locate you. */

    /* TODO: Step 2, Geolocate your user
     * Replace the code from here to the END TODO comment with new code from
     * codelab instructions. */
    let pos;
    let map;
    function initMap() {
        // Set the default location and initialize all variables
        pos = {lat: -33.857, lng: 151.213};
        map = new google.maps.Map(document.getElementById('map'), {
            center: pos,
            zoom: 15
        });
    }
    /* END TODO: Step 2, Geolocate your user */
</script>

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

3. Fügen Sie Ihren API-Schlüssel ein.

Kopieren Sie in der Zeile nach  den Wert des Schlüsselparameters in der URL der Skriptquelle und ersetzen Sie ihn durch den API-Schlüssel, den Sie während der Voraussetzung erstellt haben.

step1/index.html

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Speichern Sie die HTML-Datei, an der Sie arbeiten.

Jetzt testen

Aktualisiere deine Browseransicht der Datei, die du bearbeitet hast. Jetzt sollte eine Karte angezeigt werden, wo sich das graue Rechteck vorher befand. Wenn stattdessen eine Fehlermeldung angezeigt wird, haben Sie YOUR_API_KEY im letzten <script>-Tag durch Ihren eigenen API-Schlüssel ersetzt. Oben findest du einen API-Schlüssel, falls noch nicht geschehen.

Vollständiger Beispielcode

Der vollständige Code für dieses Projekt bis zu diesem Zeitpunkt ist auf GitHub verfügbar.

3. Standort für den Nutzer festlegen

Als Nächstes soll der geografische Standort des Nutzers oder des Geräts auf einer Google-Karte mithilfe der HTML5-Geolocation-Funktion des Browsers zusammen mit der Maps JavaScript API dargestellt werden.

Hier ist ein Beispiel für eine Karte, auf der Ihr Standort angezeigt wird, wenn Sie von Mountain View, Kalifornien, aus waren:

Was ist die Standortbestimmung?

Die Standortbestimmung ist die Identifizierung des Nutzers oder des Computers mithilfe verschiedener Methoden zur Datenerhebung. In der Regel verwenden die meisten Standortbestimmungsdienste Netzwerkroutingadressen oder interne GPS-Geräte zur Bestimmung des Standorts. Diese App verwendet die Webbrowser-Property navigator.geolocation für W3C-Geolocation, um den Standort des Nutzers zu ermitteln.

Gleich ausprobieren

Ersetzen Sie den Code zwischen den Kommentaren TODO: Step 2, Geolocate your user und END TODO: Step 2, Geolocate your user durch den folgenden Code:

step2/index.html

/* TODO: Step 2, Geolocate your user
    * Replace the code from here to the END TODO comment with this code
    * from codelab instructions. */
let pos;
let map;
let bounds;
let infoWindow;
let currentInfoWindow;
let service;
let infoPane;
function initMap() {
    // Initialize variables
    bounds = new google.maps.LatLngBounds();
    infoWindow = new google.maps.InfoWindow;
    currentInfoWindow = infoWindow;
    /* TODO: Step 4A3: Add a generic sidebar */

    // Try HTML5 geolocation
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
        };
        map = new google.maps.Map(document.getElementById('map'), {
        center: pos,
        zoom: 15
        });
        bounds.extend(pos);

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        infoWindow.open(map);
        map.setCenter(pos);

        /* TODO: Step 3B2, Call the Places Nearby Search */
    }, () => {
        // Browser supports geolocation, but user has denied permission
        handleLocationError(true, infoWindow);
    });
    } else {
    // Browser doesn't support geolocation
    handleLocationError(false, infoWindow);
    }
}

// Handle a geolocation error
function handleLocationError(browserHasGeolocation, infoWindow) {
    // Set default location to Sydney, Australia
    pos = {lat: -33.856, lng: 151.215};
    map = new google.maps.Map(document.getElementById('map'), {
    center: pos,
    zoom: 15
    });

    // Display an InfoWindow at the map center
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
    'Geolocation permissions denied. Using default location.' :
    'Error: Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
    currentInfoWindow = infoWindow;

    /* TODO: Step 3B3, Call the Places Nearby Search */
}
/* END TODO: Step 2, Geolocate your user */
/* TODO: Step 3B1, Call the Places Nearby Search */

Jetzt testen

Speichern Sie die Datei.
Lade die Seite neu.

Ihr Browser sollte Sie nun um die Berechtigung bitten, Ihren Standort mit der App zu teilen.

Klicken Sie einmal auf Blockieren, um zu prüfen, ob der Fehler ordnungsgemäß behoben wird und zentriert auf Sydney bleibt.
Aktualisieren Sie die Karte und klicken Sie auf Allow (Zulassen), um zu sehen, ob die Standortbestimmung funktioniert und die Karte an Ihren aktuellen Standort verschoben wird.

Vollständiger Beispielcode

Der vollständige Code für dieses Projekt bis zu diesem Zeitpunkt ist auf GitHub verfügbar.

4. Orte in der Nähe suchen

Mit einer Nearby Search-Anforderung können Sie nach Orten innerhalb eines bestimmten Bereichs nach Stichwort oder Typ suchen. Eine Nearby Search-Anforderung muss immer einen Standort enthalten, der in einer der beiden folgenden Formen anzugeben ist:

Ein LatLngBounds-Objekt, das einen rechteckigen Suchbereich definiert
Ein kreisförmiger Bereich, der als Kombination der location-Property definiert ist. Dabei wird die Mitte des Kreises als LatLng-Objekt angegeben, und ein Radius, gemessen in Metern.

Starte eine Nearby Search mit einem Aufruf der Methode PlacesService nearbySearch(), durch die ein Array mit PlaceResult-Objekten zurückgegeben wird.

A. Places-Bibliothek laden

Aktualisiere zuerst die URL der Skriptquelle, um die Places-Bibliotheksdienste nutzen zu können. Gib dann den Parameter libraries ein und füge places als Wert hinzu.

step3/index.html

<!-- TODO: Step 3A, Load the Places Library -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">

B. Places Nearby Search-Anfrage aufrufen und Antwort verarbeiten

Stellen Sie als Nächstes eine PlaceSearch-Anfrage. Die Pflichtfelder sind mindestens:

Die Pflichtfelder sind mindestens:

bounds, wobei es sich um ein google.maps.LatLngBounds-Objekt handeln muss, das den rechteckigen Suchbereich definiert, oder einen location- und einen radius-Wert, der erstere ein google.maps.LatLng-Objekt, und das zweite eine einfache Ganzzahl, die den Radius des Kreises in Metern darstellt. Der maximal zulässige Radius beträgt 50.000 m. Hinweis: Wenn für rankBy der Wert DISTANCE festgelegt ist, müssen Sie einen Ort angeben, aber keinen Umkreis oder Grenzen.
Ein keyword, das mit allen verfügbaren Feldern abgeglichen werden soll, einschließlich, aber nicht beschränkt auf Name, Typ und Adresse, sowie Kundenrezensionen und andere Inhalte von Drittanbietern, oder ein type, das die Ergebnisse auf Orte beschränkt, die dem angegebenen Typ entsprechen. Es kann nur ein Typ angegeben werden. Falls mehrere Typen angegeben sind, werden alle Typen nach dem ersten Eintrag ignoriert. Weitere Informationen finden Sie in der Liste der unterstützten Typen.

Für dieses Codelab verwendest du die aktuelle Position des Nutzers als Standort für die Suche und ordnet die Ergebnisse nach Entfernung.

Fügen Sie im Kommentar TODO: Step 3B1 Folgendes hinzu, um zwei Funktionen zum Aufrufen der Suche und zum Verarbeiten der Antwort zu schreiben.

Sie verwenden das Keyword sushi, aber Sie können es ändern. Der Code zum Definieren der Funktion createMarkers wird im nächsten Abschnitt beschrieben.

step3/index.html

/* TODO: Step 3B1, Call the Places Nearby Search */
// Perform a Places Nearby Search Request
function getNearbyPlaces(position) {
    let request = {
    location: position,
    rankBy: google.maps.places.RankBy.DISTANCE,
    keyword: 'sushi'
    };

    service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, nearbyCallback);
}

// Handle the results (up to 20) of the Nearby Search
function nearbyCallback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarkers(results);
    }
}

/* TODO: Step 3C, Generate markers for search results */

Fügen Sie diese Zeile am Ende der Funktion initMap in den Kommentar TODO: Step 3B2 ein.

/* TODO: Step 3B2, Call the Places Nearby Search */
// Call Places Nearby Search on user's location
getNearbyPlaces(pos);

Fügen Sie diese Zeile am Ende der Funktion handleLocationError in den Kommentar TODO: Step 3B3 ein.

/* TODO: Step 3B3, Call the Places Nearby Search */
// Call Places Nearby Search on the default location
getNearbyPlaces(pos);

C. Markierungen für Suchergebnisse generieren

Ein Marker kennzeichnet einen Standort auf einer Karte. Standardmäßig verwendet der Marker eine Standardgrafik. Weitere Informationen zum Anpassen von Markierungsbildern finden Sie unter Markierungen.

Der google.maps.Marker-Konstruktor verwendet ein einzelnes Marker options-Objektliteral, das die Anfangseigenschaften der Markierung angibt.

Die nachfolgenden Felder sind besonders wichtig und werden häufig beim Erstellen eines Markers definiert.

position (erforderlich) gibt einen LatLng an, der die anfängliche Position der Markierung bestimmt.
map ist optional und definiert die Karte, auf der die Markierung platziert werden soll. Wenn Sie die Karte nicht beim Erstellen der Markierung angeben, wird sie erstellt, aber nicht an der Karte angehängt oder angezeigt. Du kannst die Markierung später hinzufügen, indem du die Markierungsmethode setMap() aufrufst.
Fügen Sie den folgenden Code nach dem Kommentar TODO: Step 3C ein, um die Position, die Karte und den Titel für eine Markierung pro Ort in der Antwort festzulegen. Außerdem musst du die extend-Methode der bounds-Variable verwenden, damit die Mitte und alle Markierungen auf der Karte sichtbar sind.

step3/index.html

/* TODO: Step 3C, Generate markers for search results */
// Set markers at the location of each place result
function createMarkers(places) {
    places.forEach(place => {
    let marker = new google.maps.Marker({
        position: place.geometry.location,
        map: map,
        title: place.name
    });

    /* TODO: Step 4B: Add click listeners to the markers */

    // Adjust the map bounds to include the location of this marker
    bounds.extend(place.geometry.location);
    });
    /* Once all the markers have been placed, adjust the bounds of the map to
    * show all the markers within the visible area. */
    map.fitBounds(bounds);
}

/* TODO: Step 4C: Show place details in an info window */

Jetzt testen

Speichern und aktualisieren Sie die Seite und klicken Sie auf Zulassen, um Berechtigungen zur Standortbestimmung zu erteilen.

Sie sollten um die Mitte der Karte bis zu 20 rote Markierungen sehen.

Aktualisieren Sie die Seite und blockieren Sie diesmal die Berechtigungen zur Standortbestimmung.

Erhalten Sie immer noch Ergebnisse in der Standardmitte Ihrer Karte (in der Stichprobe ist dies der Standard in Sydney, Australien)?

Vollständiger Beispielcode

Der vollständige Code für dieses Projekt bis zu diesem Zeitpunkt ist auf GitHub verfügbar.

5. Ortsdetails nach Bedarf anzeigen

Sobald Sie eine Orts-ID eines Orts haben (die als eines der Felder in den Ergebnissen Ihrer Nearby Search-Anfrage bereitgestellt wurde), können Sie weitere Details über den Ort anfordern, z. B. die vollständige Adresse, die Telefonnummer sowie Bewertungen und Rezensionen von Nutzern. In diesem Codelab blenden Sie eine Seitenleiste ein, um umfangreiche Ortsdetails anzuzeigen und die Markierungen interaktiv zu gestalten, damit der Nutzer Orte auswählen kann, um weitere Details zu sehen.

Zum Anzeigen der Ortsdetails ist ein Ort erforderlich. Daher gibt es einen einfachen Code für eine Seitenleiste, mit dem Sie diese aus- und einblenden können, wenn der Nutzer auf eine Markierung klickt.

Fügen Sie dem style-Tag nach dem Kommentar TODO: Step 4A1 den folgenden Code hinzu:

step4/index.html

/* TODO: Step 4A1: Make a generic sidebar */
/* Styling for an info pane that slides out from the left. 
    * Hidden by default. */
#panel {
    height: 100%;
    width: null;
    background-color: white;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    transition: all .2s ease-out;
}

.open {
    width: 250px;
}

/* Styling for place details */
.hero {
    width: 100%;
    height: auto;
    max-height: 166px;
    display: block;
}

.place,
p {
    font-family: 'open sans', arial, sans-serif;
    padding-left: 18px;
    padding-right: 18px;
}

.details {
    color: darkslategrey;
}

a {
    text-decoration: none;
    color: cadetblue;
}

Fügen Sie im body-Abschnitt direkt vor dem map-div-Element ein div-Element für den Detailbereich ein.

<!-- TODO: Step 4A2: Add a generic sidebar -->
<!-- The slide-out panel for showing place details -->
<div id="panel"></div>

Initialisiere die Funktion initMap() nach dem Kommentar TODO: Step 4A3 so:

/* TODO: Step 4A3: Add a generic sidebar */
infoPane = document.getElementById('panel');

B. Klick-Listener zu Markierungen hinzufügen

Fügen Sie in der Funktion createMarkers bei jeder Markierung einen Klick-Listener hinzu.

Der Klick-Listener ruft Details zu dem Ort ab, der mit dieser Markierung verknüpft ist, und ruft die Funktion auf, um die Details anzuzeigen.

Fügen Sie den folgenden Code in die Funktion createMarkers im Codekommentar ein TODO: Step 4B.

Die Methode showDetails wird im nächsten Abschnitt implementiert.

step4/index.html

/* TODO: Step 4B: Add click listeners to the markers */
// Add click listener to each marker
google.maps.event.addListener(marker, 'click', () => {
    let request = {
    placeId: place.place_id,
    fields: ['name', 'formatted_address', 'geometry', 'rating',
        'website', 'photos']
    };

    /* Only fetch the details of a place when the user clicks on a marker.
    * If we fetch the details for all place results as soon as we get
    * the search response, we will hit API rate limits. */
    service.getDetails(request, (placeResult, status) => {
    showDetails(placeResult, marker, status)
    });
});

In der addListener-Anfrage gibt die placeId-Property einen einzelnen Ort für die Detailanfrage an und die fields-Property ist ein Array von Feldnamen für Informationen, die zu dem Ort zurückgegeben werden sollen. Hier finden Sie eine vollständige Liste der Felder, die Sie anfordern können.

C. Place Details in einem Infofenster anzeigen

In einem Infofenster werden Inhalte, normalerweise Text oder Bilder, in einem Dialogfeld über einer bestimmten Position auf einer Karte angezeigt. Das Info-Fenster besteht aus einem Inhaltsbereich und einem sich verjüngenden Hals. Die Spitze des Halses ist an einen bestimmten Ort auf der Karte angefügt. In der Regel werden Infofenster mit Markierungen versehen. Sie können jedoch auch ein Infofenster an einen bestimmten Breiten-/Längengrad anhängen.

Fügen Sie den folgenden Code im Kommentar TODO: Step 4C ein, um eine InfoWindow zu erstellen, die den Namen und die Bewertung des Unternehmens enthält und dieses Fenster an der Markierung anhängt.

Sie legen showPanel im nächsten Abschnitt fest, um Details in einer Seitenleiste einzublenden.

step4/index.html

/* TODO: Step 4C: Show place details in an info window */
// Builds an InfoWindow to display details above the marker
function showDetails(placeResult, marker, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    let placeInfowindow = new google.maps.InfoWindow();
    placeInfowindow.setContent('<div><strong>' + placeResult.name +
        '</strong><br>' + 'Rating: ' + placeResult.rating + '</div>');
    placeInfowindow.open(marker.map, marker);
    currentInfoWindow.close();
    currentInfoWindow = placeInfowindow;
    showPanel(placeResult);
    } else {
    console.log('showDetails failed: ' + status);
    }
}

/* TODO: Step 4D: Load place details in a sidebar */

Verwenden Sie dieselben Details, die im PlaceResult-Objekt zurückgegeben werden, um ein anderes div-Element auszufüllen. In diesem Beispiel verwenden Sie infoPane. Das ist ein beliebiger Variablenname für das div-Element mit der ID panel. Jedes Mal, wenn der Nutzer auf eine neue Markierung klickt, wird die Seitenleiste geschlossen, sofern sie bereits geöffnet war. Die alten Details werden dann gelöscht und die Seitenleiste wird geöffnet.

Fügen Sie nach dem Kommentar TODO: Step 4D den folgenden Code ein.

step4/index.html

/* TODO: Step 4D: Load place details in a sidebar */
// Displays place details in a sidebar
function showPanel(placeResult) {
    // If infoPane is already open, close it
    if (infoPane.classList.contains("open")) {
    infoPane.classList.remove("open");
    }

    // Clear the previous details
    while (infoPane.lastChild) {
    infoPane.removeChild(infoPane.lastChild);
    }

    /* TODO: Step 4E: Display a Place Photo with the Place Details */

    // Add place details with text formatting
    let name = document.createElement('h1');
    name.classList.add('place');
    name.textContent = placeResult.name;
    infoPane.appendChild(name);
    if (placeResult.rating != null) {
    let rating = document.createElement('p');
    rating.classList.add('details');
    rating.textContent = `Rating: ${placeResult.rating} \u272e`;
    infoPane.appendChild(rating);
    }
    let address = document.createElement('p');
    address.classList.add('details');
    address.textContent = placeResult.formatted_address;
    infoPane.appendChild(address);
    if (placeResult.website) {
    let websitePara = document.createElement('p');
    let websiteLink = document.createElement('a');
    let websiteUrl = document.createTextNode(placeResult.website);
    websiteLink.appendChild(websiteUrl);
    websiteLink.title = placeResult.website;
    websiteLink.href = placeResult.website;
    websitePara.appendChild(websiteLink);
    infoPane.appendChild(websitePara);
    }

    // Open the infoPane
    infoPane.classList.add("open");
}

E. Ortsfoto mit Ortsdetails anzeigen

Das getDetails-Ergebnis gibt ein Array von bis zu zehn Fotos zurück, die mit dem placeId verknüpft sind. Hier erscheint das erste Foto über dem Ortsnamen in der Seitenleiste.

Platzieren Sie diesen Code vor dem Erstellen des name-Elements, wenn das Foto oben in der Seitenleiste angezeigt werden soll.

step4/index.html

/* TODO: Step 4E: Display a Place Photo with the Place Details */
// Add the primary photo, if there is one
if (placeResult.photos != null) {
    let firstPhoto = placeResult.photos[0];
    let photo = document.createElement('img');
    photo.classList.add('hero');
    photo.src = firstPhoto.getUrl();
    infoPane.appendChild(photo);
}

Jetzt testen

Speichern und aktualisieren Sie die Seite in Ihrem Browser und lassen Sie die Berechtigung zur Standortbestimmung zu.
Klicken Sie auf eine Markierung, um das Infofenster der Markierung mit einigen Details zu sehen. Die Seitenleiste wird von links geöffnet, um weitere Details anzuzeigen.
Testen Sie, ob die Suche auch funktioniert, wenn Sie die Berechtigungen aktualisieren und ablehnen. Bearbeiten Sie Ihr Keyword für eine andere Suchanfrage und sehen Sie sich das Ergebnis an.

Vollständiger Beispielcode

Der vollständige Code für dieses Projekt bis zu diesem Zeitpunkt ist auf GitHub verfügbar.

6. Glückwunsch

Glückwunsch! Du hast viele Funktionen der Maps JavaScript API genutzt, darunter auch die Places-Bibliothek.

Behandelte Themen

Karte mit der Klasse google.maps.Map erstellen
Verwendung des Browsers des Nutzers für die Standortbestimmung und Darstellung der Ergebnisse auf einer Karte
Der Karte Markierungen hinzufügen und Klickereignisse der Nutzer darauf reagieren
Infofenster hinzufügen, um weitere Informationen zu erhalten, wenn ein Nutzer auf eine Markierung klickt.
Laden der Places Library und Ausführen einer Nearby Search
Ortsdetails und Ortsfotos werden abgerufen und angezeigt.

Weitere Informationen

Wenn Sie noch mehr mit Karten arbeiten möchten, sehen Sie sich die Dokumentation zur Maps JavaScript API und die Dokumentation zur Places-Bibliothek an. Sie enthalten Anleitungen, Anleitungen, die API-Referenz, weitere Codebeispiele und Supportkanäle. Eine beliebte Funktion ist zum Beispiel das Importieren von Daten in Google Maps, das Starten von Kartenstilen und das Hinzufügen des Street View-Dienstes.

Welche Art von Codelab möchten Sie als Nächstes erstellen?

Weitere Beispiele zur Verwendung aussagekräftiger Places-Informationen

Weitere Codelabs bei Verwendung der Maps Platform JavaScript API

Mehr Codelabs für Android

Mehr Codelabs für iOS

Standortbasierte Daten auf Karten darstellen

Benutzerdefinierte Stile von Karten

Verwendung von StreetView

Ist das Codelab, das oben nicht aufgeführt werden soll? Hier können Sie ein neues Problem beantragen.

Dienst für die Suche in der Nähe mit der Google Maps Platform (JavaScript) erstellen

1. Hinweis

Voraussetzungen

Einführung in Google Maps Platform

Aufgabe

Voraussetzungen

Beispielcode abrufen

2. Karte mit Standardcenter erstellen

1. HTML-Seite erstellen

2. Karte hinzufügen

3. Fügen Sie Ihren API-Schlüssel ein.

Jetzt testen

Vollständiger Beispielcode

3. Standort für den Nutzer festlegen

Was ist die Standortbestimmung?

Gleich ausprobieren

Jetzt testen

Vollständiger Beispielcode

4. Orte in der Nähe suchen

A. Places-Bibliothek laden

B. Places Nearby Search-Anfrage aufrufen und Antwort verarbeiten

C. Markierungen für Suchergebnisse generieren

Jetzt testen

Vollständiger Beispielcode

5. Ortsdetails nach Bedarf anzeigen

A. Eine einfache Seitenleiste erstellen

B. Klick-Listener zu Markierungen hinzufügen

C. Place Details in einem Infofenster anzeigen

D. Ortsdetails in einer Seitenleiste laden

E. Ortsfoto mit Ortsdetails anzeigen

Jetzt testen

Vollständiger Beispielcode

6. Glückwunsch

Behandelte Themen

Weitere Informationen

Welche Art von Codelab möchten Sie als Nächstes erstellen?