Dans cet exemple, nous appliquons un style de carte personnalisé à la carte de base. Cette carte montre Waikiki à Hawaï et présente un jeu de couleurs tropicales. Nous avons également défini maxPlaceCount sur 18 pour afficher plus de POI.
/*
* 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;
}
<html>
<head>
<title>Local Context Styles</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta"
defer
></script>
</body>
</html>
La carte de base est accessible en tant que propriété map d'un objet google.maps.localContext.LocalContextMapView. Cette carte est un objet google.maps.Map standard qui peut être personnalisé avec l'ensemble des paramètres et méthodes disponibles pour cette classe. Par exemple, vous pouvez ajouter des repères personnalisés et des écouteurs d'événements.
var marker = new google.maps.Marker({position: center, map: localContextMapView.map});
Étant donné que les styles par défaut de google.maps.localContext.LocalContextMapView.map sont différents de ceux d'une Map standard, vous pouvez choisir d'ignorer les valeurs par défaut ou de fusionner votre style personnalisé avec les valeurs par défaut de la bibliothèque de contexte local. Pour en savoir plus, consultez Appliquer un style à la carte.
Pour créer un style basé sur les styles par défaut LocalContextMapView avec des styles personnalisés (stylesArray) :
Cet exemple utilise une icône d'hôtel pour distinguer le point central du repère rouge par défaut. Découvrez comment personnaliser un repère en modifiant les propriétés label et icon d'un Marker.
Par défaut, ces repères apparaissent sous les repères de POI de la bibliothèque de contexte local. Pour vous assurer que les repères de la bibliothèque de contexte local ne masquent pas le repère personnalisé, définissez la propriété zIndex du repère sur une valeur plus élevée que maxPlaceCount.
TypeScript
// Add a marker at the center point
new google.maps.Marker({
position: center,
map: map,
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
zIndex: 30,
});
// Add a marker at the center point
new google.maps.Marker({
position: center,
map: map,
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
zIndex: 30,
});
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.