Comment puis-je personnaliser la présentation InfoWindow de Google Maps ?

Personnalisation de la présentation InfoWindow de Google Maps

Le style d'une InfoWindow dans Google Maps peut poser un défi en raison d'une documentation limitée. Heureusement, différentes approches existent pour obtenir la personnalisation souhaitée :

Classe InfoBubble

Google propose la classe InfoBubble comme alternative à InfoWindow. InfoBubble est hautement stylable, vous permettant de personnaliser son apparence grâce à des propriétés telles que backgroundColor, borderRadius et arrowStyle. Voici un exemple :

infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 5,
  arrowSize: 10
});

infoBubble.open();

Fenêtre d'informations personnalisée (OverlayView)

Une autre approche consiste à étendre la classe GOverlay de l'API Google Maps et à l'utiliser comme base pour un fenêtre d'information personnalisée. Cette méthode offre une plus grande flexibilité et nécessite la mise en œuvre de méthodes telles que createElement, draw et panMap :

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  ...
}

InfoBox.prototype = new google.maps.OverlayView();

Notez que le remplacement des méthodes requises est nécessaire pour créer une fenêtre d'informations personnalisée entièrement fonctionnelle en utilisant cette approche.

Modification des éléments de l'InfoWindow avec JavaScript

Vous pouvez également modifier les éléments de l'InfoWindow de manière dynamique à l'aide de JavaScript (ou jQuery). En manipulant des éléments dans InfoWindow, vous pouvez obtenir un certain degré de personnalisation.

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!