Lorsque vous activez la connexion avec Google Maps JavaScript API, les cartes sur votre site sont adaptées à vos utilisateurs. Les utilisateurs qui sont connectés à leur compte Google peuvent enregistrer des lieux pour un affichage ultérieur sur le Web ou via leur appareil mobile. Les lieux enregistrés à partir de la carte peuvent être attribués à votre site ou à votre application.
Présentation
Chaque visiteur de votre site voit une carte Google Map personnalisée. S'il est connecté avec son compte Google, ses lieux enregistrés, son domicile, son lieu de travail et plus encore sont intégrés dans la carte affichée. Cela signifie également que les interactions avec la carte, comme le marquage d'un lieu avec une étoile, sont conservées et pourront être consultées aisément dans Google Maps pour ordinateurs de bureau ou appareils mobiles, ainsi que dans toute autre carte Google Maps que l'utilisateur pourrait consulter sur le Web.
Ces détails spécifiques à l'utilisateur ne sont visibles que par l'utilisateur connecté. Aucun autre utilisateur de votre application ne peut les voir. Ils ne sont pas non plus accessibles avec l'API. Veuillez trouver ci-dessous un exemple de carte avec connexion. Une fenêtre de connexion à votre compte Google ou votre avatar Google devrait s'afficher en haut à droit de la carte.
Voir l'échantillon de code complet.
Activer la connexion
Pour activer la connexion sur une carte créée avec Google Maps JavaScript API, chargez la version v3.18 ou une version ultérieure de l'API avec le paramètre additionnel signed_in=true.
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&signed_in=true&key=YOUR_API_KEY" async defer> </script>
Une fenêtre de connexion à votre compte Google ou votre avatar Google devrait être affiché en haut à droit de la carte.
Les utilisateurs peuvent cliquer sur la commande de connexion en haut à droite de la carte pour se connecter à leur compte Google. S'ils étaient déjà connectés à Google via une autre propriété, ils seront automatiquement connectés à la carte.
Enregistrement attribué
Aidez vos utilisateurs à se rappeler des endroits qui comptent le plus pour eux en leur permettant d'enregistrer des lieux dans Google Maps. Les lieux enregistrés apparaissent sur les autres cartes Google Maps lorsque l'utilisateur les consulte sur le Web ou des appareils mobiles. Lorsqu'un utilisateur enregistre un lieu depuis un objet SaveWidget ou InfoWindow, vous pouvez inclure une mention personnalisée et des liens vers votre application.
Vous pouvez activer la fonctionnalité d'enregistrement attribué de deux façons :
- En ajoutant les informations de l'objet
placeà un marqueur afin de permettre l'enregistrement depuis une fenêtreInfoWindowancrée à cet objetMarker. - En créant un objet
SaveWidgetpersonnalisé.
Les lieux enregistrés sont ensuite accessibles en les sélectionnant sur la carte.
Enregistrer dans Google Maps à l'aide d'une fenêtre d'info
Ajoutez des informations sur un lieu à un marqueur afin d'activer la commande Enregistrer dans Google Maps sur la fenêtre d'info par défaut. Cette commande est automatiquement ajoutée à toute fenêtre d'info associée à ce marqueur. Vous pouvez également attribuer l'enregistrement à votre application pour aider les utilisateurs à se rappeler de la source d'origine.
Pour activer la fonction Enregistrer dans Google Maps à partir d'une fenêtre d'info :
- Créez un nouvel objet
Marker. - Dans
MarkerOptions, spécifiez les propriétésmap,placeetattribution. Notez que la propriétépositionn'est pas nécessaire lorsque la propriétéplaceest fournie. - Dans l'objet
place, spécifiez une propriétélocationet l'un des éléments suivants :- Un identifiant
placeIdpour identifier le lieu de manière unique. En savoir plus sur comment référencer un lieu avec un identifiant de lieu. - Une chaîne
querypour rechercher des lieux à proximité de l'objetlocation. Les chaînes de recherche doivent être les plus précises possible. Par exemple :'stanley park vancouver bc canada'.
- Un identifiant
- Dans l'objet
attribution, spécifiez ce qui suit :- La
sourcede l'enregistrement. Il s'agit en général du nom de votre site ou application. - Une adresse
webUrl(facultative) à inclure comme lien vers votre site. - Un code
iosDeepLinkId(facultatif), spécifié comme modèle d'URL et qui s'affiche à la place de l'adressewebUrlsur iOS.
- La
- Créez un nouvel objet
InfoWindow. - Ajoutez un écouteur d'événement pour ouvrir l'objet
InfoWindowlorsque l'utilisateur clique sur l'objetMarker.
Cela permet d'activer l'option Enregistrer dans Google Maps dès que l'on clique sur le marqueur.
Veuillez trouver ci-dessous un exemple illustrant l'utilisation d'une chaîne query pour rechercher un lieu.
Voir l'échantillon de code complet.
// [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]
Enregistrer dans Google Maps via la commande SaveWidget
Vous pouvez utiliser la commande SaveWidget afin de créer une interface utilisateur personnalisée pour enregistrer des lieux. Lorsque vous utilisez la commande SaveWidget, vous pouvez spécifier des données de mention supplémentaires afin que vos utilisateurs se souviennent de la source d'enregistrement du lieu et puissent facilement revenir à votre application.
Pour ajouter une commande SaveWidget à votre application, procédez comme suit :
- Ajoutez une balise
divà une page contenant une carte Google. - Indiquez le lieu à enregistrer avec un marqueur, afin que vos utilisateurs sachent quel lieu ils enregistrent.
- Créez un objet
SaveWidgetOptionsincluant un littéral objetplaceetattribution. - Créez un nouvel objet
SaveWidget, en transmettant la balisedivet les options que vous avez ajoutées.
Voici un exemple de widget d'enregistrement pour le bureau de Google à Sydney. Dans cet exemple, nous créons une balise div en dehors de la surface de la carte, puis utilisons Google Maps JavaScript API pour ajouter cette balise div en tant que commande.
Voir l'échantillon de code complet.
<!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>
Besoin d'aide ? Consultez notre