Comment puis-je personnaliser Google Maps InfoWindows ?

Personnalisation de Google Maps InfoWindows

Styliser une InfoWindow peut être un défi en raison de la documentation limitée disponible. Voici un guide détaillé sur la façon de modifier l'apparence d'une InfoWindow :

InfoBubble

Une option consiste à utiliser la bibliothèque InfoBubble, qui fournit des options de style étendues au-delà des capacités d'InfoWindow. Pour implémenter InfoBubble, importez le fichier suivant :

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

Configurez l'InfoBubble comme suit :

infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  // Styling options
  shadowStyle: 1,
  padding: 0,
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 5,
  arrowSize: 10,
  borderWidth: 1,
  borderColor: '#2c2c2c',
  disableAutoPan: true,
  hideCloseButton: true,
  arrowPosition: 30,
  backgroundClassName: 'transparent',
  arrowStyle: 2
});

infoBubble.open();

Fenêtre d'informations personnalisée

Alternativement, vous pouvez étendre la classe GOverlay à partir de l'API Google Maps pour créer votre propre InfoWindow personnalisée. Cette option nécessite la mise en œuvre de méthodes personnalisées pour créer l'élément, le dessiner sur la carte et gérer les événements.

Tout d'abord, créez la classe InfoBox :

function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  // Initialize properties
}

Remplacez les méthodes nécessaires :

InfoBox.prototype = new google.maps.OverlayView();
// Implement createElement, draw, remove, and panMap methods

Cette approche offre une plus grande flexibilité dans la personnalisation de l'apparence et du comportement de l'InfoWindow.

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!