Wenn Sie für Google Maps JavaScript API eine Anmeldung aktivieren, wird die Anzeige der Karten auf Ihrer Website an den jeweiligen Benutzer angepasst. Benutzer, die an ihrem Google-Konto angemeldet sind, können Orte für die spätere Anzeige über das Internet oder mobile Geräte speichern. Die von einer Karte gespeicherten Karten können mit individuellen Zuordnungen zu Ihrer Website oder App ergänzt werden.
Übersicht
Jedem Besucher Ihrer Site wird eine individuell auf ihn zugeschnittene Google-Karte angezeigt. Sind Benutzer mit ihrem Google-Konto angemeldet, werden die von ihnen gespeicherten Orte, Heimat-und Arbeitsorte direkt in die ihnen angezeigte Karte integriert. Das bedeutet außerdem, das Interaktionen mit der Karte, z. B. die Vergabe von Sternen für einen Standort, gespeichert werden, sodass diese ganz einfach in Google Maps für Desktop-PCs oder mobile Geräte sowie in jeder anderen Google-Karte, die ein Benutzer im Internet aufruft, angezeigt werden können.
Diese benutzerspezifischen Details werden ausschließlich dem angemeldeten Benutzer angezeigt. Sie sind für andere Benutzer Ihrer Anwendung nicht zu sehen und können auch nicht mit der API aufgerufen werden. Nachfolgend ist ein Beispiel einer anmeldungsspezifischen Karte dargestellt. Oben rechts in der Karte befindet sich ein Google-Anmeldefeld oder Ihr Google-Avatar.
Den gesamten Beispielcode können Sie hier anzeigen.
Anmeldung aktivieren
Um die Anmeldung für eine mit Google Maps JavaScript API erstellten Karte zu aktivieren, laden Sie mindestens die Version v3.18 der API mit dem zusätzlichen Parameter signed_in=true.
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&signed_in=true&key=YOUR_API_KEY" async defer> </script>
Oben rechts in der Karte befindet sich ein Google-Anmeldefeld oder Ihr Google-Avatar.
Benutzer können auf das Anmeldesteuerelement oben rechts in der Karte klicken, um sich mit ihrem Google-Konto anzumelden. Wenn sie sich zuvor für eine andere Eigenschaft bei Google angemeldet haben, sind die Benutzer automatisch an der Karte angemeldet.
Speichern mit Zuordnungen
Dieses Steuerelement ermöglicht Benutzern, Standorte, die ihnen wichtig sind, in Google Maps zu speichern. Gespeicherte Orte werden dem Benutzer in anderen Google Maps angezeigt, wenn er diese im Internet oder auf mobilen Geräten aufruft. Wenn ein Benutzer einen Ort aus einem SaveWidget oder InfoWindow speichert, können Sie personalisierte Zuordnungen und Links zurück zu Ihrer Anwendung ergänzen.
Sie haben zwei Möglichkeiten, um die Funktion zum Speichern mit Zuordnungen zu aktivieren:
- Fügen Sie Informationen zum Ort (
place) zu einem Marker hinzu, um das Speichern von einemInfoWindowzu ermöglichen, das an diesemMarkerverankert ist. - Erstellen Sie ein benutzerdefiniertes
SaveWidget.
Die Orte können dann zu einem späteren Zeitpunkt durch Auswählen eines gespeicherten Ortes auf der Karte aufgerufen werden.
„Save to Google Maps“ mit einem Info-Fenster
Fügen Sie Informationen zu einem Ort auf einem Marker hinzu, um ein Steuerelement „Save to Google Maps“ in Info-Standardfenster zu aktivieren. Dieses Steuerelement wird automatisch zu jedem beliebigen Info-Fenster, das mit diesem Marker verbunden ist, hinzugefügt. Sie können das Speichern um eine Zuordnung zu Ihrer App ergänzen, um es den Benutzern zu erleichtern, die ursprüngliche Quelle im Gedächtnis zu behalten.
So aktivieren Sie „Save to Google Maps“ aus einem Info-Fenster:
- Erstellen Sie einen neuen
Marker. - Geben Sie in den
MarkerOptions, die Eigenschaftenmap,placeundattributionan. Beachten Sie, dass die Eigenschaftpositionnicht erforderlich ist, wenn das Objektplaceangegeben ist. - Definieren Sie im Objekt
placeden Wertlocationund einen der folgenden Werte:placeIdzur eindeutigen Identifizierung eines Ortes. Weitere Informationen finden Sie unter Erstellen von Verweisen auf Orte mit einer Orts-ID.- Eine Abfragezeichenfolge (
query) für die Suche in der Nähe des Standortes (location). Suchzeichenfolgen sollten so spezifisch wie möglich sein. Beispiel:'stanley park vancouver bc canada'.
- Geben Sie im Objekt
attributionFolgendes an:- Die Quelle (
source) des Speichervorgangs. In der Regel Ihre Website oder App. - Eine optionale
webUrl, die als Link zurück zu Ihrer Website eingefügt werden kann. - Eine optionale ID
iosDeepLinkId, angegeben als URL-Schema, die anstelle derwebUrlangezeigt wird, wenn die App mit iOS ausgeführt wird.
- Die Quelle (
- Erstellen Sie ein neues
InfoWindow. - Fügen Sie einen Event-Listener hinzu, um das
InfoWindowbei einem Klick auf denMarkerzu öffnen.
Dadurch wird eine Option „Save to Google Maps“ aktiviert, wenn ein Kick auf den Marker erfolgt.
Im nachfolgenden Beispiel ist dargestellt, wie eine Abfragezeichenfolge (query) für die Suche nach einem Standort verwendet wird.
Den gesamten Beispielcode können Sie hier anzeigen.
// [START script-body]
// When you add a marker using a Place instead of a location, the Maps
// API will automatically add a 'Save to Google Maps' link to any info
// window associated with that marker.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: -33.8666, lng: 151.1958}
});
var marker = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {lat: -33.8666, lng: 151.1958},
query: 'Google, Sydney, Australia'
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
// Construct a new InfoWindow.
var infoWindow = new google.maps.InfoWindow({
content: 'Google Sydney'
});
// Opens the InfoWindow when marker is clicked.
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
// [END script-body]
„Save to Google Maps“ mit SaveWidget
Sie können das Steuerelement SaveWidget verwenden, um eigene Benutzeroberflächen zum Speichern von Orten zu erstellen. Wenn Sie das Steuerelement SaveWidget verwenden, können Sie zusätzliche Zuordnungsdaten angeben, damit sich der Benutzer daran erinnert, über welche App/Website er den Ort gespeichert hat und damit er problemlos zu Ihrer App zurückkehren kann.
Verfahren Sie wie folgt, um ein Element SaveWidget zu Ihrer App hinzuzufügen.
- Fügen Sie ein Element
divzu einer Seite mit einer Google-Karte hinzu. - Kennzeichnen Sie den zu speichernden Ort mit einem Marker, damit der Benutzer weiß, welcher Ort gespeichert wird.
- Erstellen Sie ein Objekt
SaveWidgetOptions, das ein Objektliteralplaceundattributionenthält. - Erstellen Sie ein neues Objekt
SaveWidget, mit dem der Wertdivund die hinzugefügten Optionen übergeben werden.
Das nachfolgende Beispiel zeigt ein „SaveWidget“ zum Speichern des Google-Standorts in Sydney. In diesem Beispiel erstellen wir das Element div außerhalb der Kartenleinwand und verwenden anschließend die Google Maps JavaScript API, um das Element div als Steuerelement hinzuzufügen.
Den gesamten Beispielcode können Sie hier anzeigen.
<!DOCTYPE html>
<html>
<head>
<title>Custom Save Widget</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%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#save-widget {
width: 300px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
background-color: white;
padding: 10px;
font-family: Roboto, Arial;
font-size: 13px;
margin: 15px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="save-widget">
<strong>Google Sydney</strong>
<p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
"living wall" made of plants, a tire swing, a library with a nap pod and some amazing
baristas.</p>
</div>
<script>
/*
* This sample uses a custom control to display the SaveWidget. Custom
* controls can be used in place of the default Info Window to create a
* custom UI.
* This sample uses a Place ID to reference Google Sydney. Place IDs are
* stable values that uniquely reference a place on a Google Map and are
* documented in detail at:
* https://developers.google.com/maps/documentation/javascript/places#placeid
*/
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: -33.8666, lng: 151.1958},
mapTypeControlOptions: {
mapTypeIds: [
'roadmap',
'satellite'
],
position: google.maps.ControlPosition.BOTTOM_LEFT
}
});
var widgetDiv = document.getElementById('save-widget');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);
// Append a Save Control to the existing save-widget div.
var saveWidget = new google.maps.SaveWidget(widgetDiv, {
place: {
// ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
location: {lat: -33.866647, lng: 151.195886}
},
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
var marker = new google.maps.Marker({
map: map,
position: saveWidget.getPlace().location
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
</script>
</body>
</html>
Weitere Fragen?