Google Maps

Ajouter un marqueur dans Google Maps

Google Maps - Superpositions

Les superpositions sont des objets sur la carte qui sont liés à des coordonnées de longitude/latitude, et se déplacent lorsque vous faites glisser ou zoomez la carte.

L'API Google Maps propose les types de superpositions suivants :

  • Les points sur la carte sont affichés à l'aide de marqueurs, qui affichent généralement des icônes personnalisées. Un marqueur est un objet de type GMarker, et vous pouvez utiliser un objet de type GIcon pour personnaliser l'icône.
  • Les lignes sur la carte sont affichées à l'aide de polylignes (qui représentent une collection de points). Une ligne est un objet de type GPolyline.
  • Les zones sur la carte sont affichées sous forme de polygones (s'il s'agit de régions de forme arbitraire) ou de superpositions au sol (s'il s'agit de régions rectangulaires). Un polygone est similaire à une polyligne fermée, il peut donc avoir n'importe quelle forme. Les superpositions au sol sont couramment utilisées pour les régions de la carte qui sont directement ou indirectement associées à des tuiles.
  • La carte elle-même est affichée à l'aide de superpositions de tuiles. Si vous disposez de votre propre ensemble de tuiles, vous pouvez utiliser la classe GTileLayerOverlay pour modifier les tuiles existantes sur la carte, ou même utiliser GMapType pour créer votre propre type de carte.
  • Une fenêtre d'information est également un type spécial de superposition. Notez toutefois que la fenêtre d'information est ajoutée automatiquement à la carte, et la carte ne peut avoir qu'un seul objet de type GInfoWindow ajouté.

Google Maps - Ajout de marqueurs

Les marqueurs identifient des points sur la carte. Par défaut, ils utilisent G_DEFAULT_ICON (vous pouvez également spécifier une icône personnalisée). Le constructeur GMarker prend des objets GLatLng et GMarkerOptions (facultatif) comme arguments.

Les marqueurs sont conçus pour être interactifs. Par exemple, par défaut, ils reçoivent un événement "click", qui est souvent utilisé pour ouvrir une fenêtre d'information dans un écouteur d'événements.

Ajoutez un marqueur à la carte à l'aide de la méthode setMap() :

Exemple

var marker=new google.maps.Marker({ position:myCenter, }); marker.setMap(map);

Essayez-le vous-même »

Google Maps - Marqueurs déplaçables

L'exemple suivant montrera comment utiliser la propriété animation pour déplacer des marqueurs :

Exemple

marker=new google.maps.Marker({ position:myCenter, animation:google.maps.Animation.BOUNCE }); marker.setMap(map);

Essayez-le vous-même »

Google Maps - Icônes

Les marqueurs peuvent être affichés avec une nouvelle icône personnalisée pour remplacer l'icône par défaut :

Exemple

var marker=new google.maps.Marker({ position:myCenter, icon:'pinkball.png' }); marker.setMap(map);

Essayez-le vous-même »

Google Maps - Polylignes

Un objet GPolyline peut créer des superpositions linéaires sur la carte. GPolyline contient une série de points et crée une série de segments de ligne ordonnés reliant ces points.

Les polylignes prennent en charge les propriétés suivantes :

  • path - Spécifie les coordonnées de latitude/longitude de plusieurs lignes.
  • strokeColor - Spécifie la valeur de couleur hexadécimale de la ligne (format : "#FFFFFF")
  • strokeOpacity - Spécifie l'opacité de la ligne (la valeur varie de 0.0 à 1.0)
  • strokeWeight - Définit la largeur de la ligne, en pixels.
  • editable - Définit si l'utilisateur peut modifier la ligne (true/false)

Exemple

var myTrip = [stavanger,amsterdam,london]; var flightPath = new google.maps.Polyline({ path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2 });

Essayez-le vous-même »

Google Maps - Polygones

Un objet GPolygon est similaire à un objet GPolyline car tous deux contiennent une série de points ordonnés. Cependant, contrairement à une polyligne, un polygone n'a pas deux extrémités ; au lieu de cela, il est conçu pour définir une région formant une boucle fermée.

Comme pour les polylignes, vous pouvez personnaliser la couleur, l'épaisseur et la transparence des bords (lignes) d'un polygone, ainsi que la couleur et la transparence de la zone de remplissage délimitée. Les couleurs doivent être des nombres hexadécimaux de style HTML.

Les polygones prennent en charge les propriétés suivantes :

  • path - Spécifie les coordonnées de plusieurs latitudes de ligne (les première et dernière coordonnées sont égales)
  • strokeColor - Spécifie la valeur de couleur hexadécimale de la ligne (format : "#FFFFFF")
  • strokeOpacity - Spécifie l'opacité de la ligne (la valeur varie de 0.0 à 1.0)
  • strokeWeight - Définit la largeur de la ligne, en pixels.
  • fillColor - Spécifie la valeur de couleur hexadécimale de la région fermée (format : "#FFFFFF")
  • fillOpacity - Spécifie l'opacité de la couleur de remplissage (la valeur est comprise entre 0.0 et 1.0)
  • editable - Définit si l'utilisateur peut modifier la ligne (true/false)

Exemple

var myTrip = [stavanger,amsterdam,london,stavanger]; var flightPath = new google.maps.Polygon({ path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 });

Essayez-le vous-même »

Google Maps - Cercle

Les cercles prennent en charge les propriétés suivantes :

  • center - Spécifie le point central du cercle en tant que paramètre google.maps.LatLng
  • radius - Spécifie le rayon du cercle, en mètres.
  • strokeColor - Spécifie la valeur de couleur hexadécimale de l'arc (format : "#FFFFFF")
  • strokeOpacity - Spécifie l'opacité de l'arc (la valeur varie de 0.0 à 1.0)
  • strokeWeight - Définit la largeur de la ligne, en pixels.
  • fillColor - Spécifie la valeur hexadécimale de la couleur de remplissage du cercle (format : "#FFFFFF")
  • fillOpacity - Spécifie l'opacité de la couleur de remplissage (la valeur est comprise entre 0.0 et 1.0)
  • Définit si l'utilisateur peut modifier la ligne (true/false)

Exemple

var myCity = new google.maps.Circle({ center:amsterdam, radius:20000, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 });

Essayez-le vous-même »

Google Maps - Fenêtres d'informations

Afficher une fenêtre d'information textuelle sur un marqueur :

Exemple

var infowindow = new google.maps.InfoWindow({ content:"Hello World!" }); infowindow.open(map,marker);

Essayez-le vous-même »

Google Maps - Manuel de référence des superpositions

Manuel de référence de l'API Google Maps.

autres extensions