Comment créer des fenêtres d'informations personnalisées avec des coins carrés dans Google Maps ?

Création de fenêtres d'informations personnalisées dans Google Maps

La fenêtre d'informations par défaut de Google Maps, qui apparaît lorsque l'on clique sur un marqueur de carte, présente souvent des coins arrondis. Cependant, vous souhaiterez peut-être une InfoWindow plus personnalisée avec des coins carrés. Cet article fournit des conseils pour réaliser cette personnalisation.

Utilisation des bibliothèques JavaScript

Les bibliothèques JavaScript externes offrent des solutions robustes pour créer des InfoWindows personnalisées. Une option populaire est la bibliothèque Google Maps Info Bubble. Il vous permet de modifier l'apparence, la forme et le contenu d'InfoWindows en fonction de vos besoins spécifiques.

Exemple d'implémentation

L'extrait de code suivant montre comment implémenter un InfoWindow utilisant la bibliothèque Info Bubble :

<code class="js">const infoBubble = new google.maps.InfoWindowBubble({
  maxWidth: 300, // Maximum width of the InfoWindow
  maxHeight: 200, // Maximum height of the InfoWindow
  arrowPosition: 50, // Offset of the arrow from the center of the InfoWindow
  padding: 10, // Padding around the content of the InfoWindow
  borderWidth: 1, // Border width around the InfoWindow
  borderColor: "#000000", // Border color of the InfoWindow
  backgroundColor: "#FFFFFF", // Background color of the InfoWindow
  hideCloseButton: true, // Hide the close button on the InfoWindow
  borderRadius: 0, // Set the border radius to 0 for square corners
});

// Attach the custom InfoWindow to a map marker
const marker = new google.maps.Marker({
  position: {
    lat: 0,
    lng: 0,
  },
  map,
});
marker.addListener("click", () => {
  infoBubble.setContent("This is a custom InfoWindow.");
  infoBubble.open(map, marker);
});</code>

Cet exemple crée une InfoWindow aux coins carrés avec une taille maximale de 300 px de large et 200 px de haut. Il a une bordure noire, un fond blanc et aucun bouton de fermeture visible.

Alternatives

Si la bibliothèque Info Bubble ne répond pas à vos besoins, envisagez d'explorer d'autres options telles que comme la bibliothèque MarkerClusterer ou la bibliothèque DataLayer. Les deux offrent des solutions flexibles pour personnaliser InfoWindows et améliorer votre expérience Google Maps.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!