Superpositions Google Maps
Google Maps - Superpositions
Les superpositions sont des objets sur la carte qui sont liés aux coordonnées de latitude/longitude.
Google Maps propose plusieurs types de superpositions :
- Marqueur - Emplacements uniques sur une carte. Les marqueurs peuvent également afficher des images d'icônes personnalisées
- Polyligne - Série de lignes droites sur une carte
- Polygone - Série de lignes droites sur une carte, et la forme est "fermée"
- Cercle et rectangle
- Info Windows - Affiche le contenu dans une bulle contextuelle au-dessus d'une carte
- Superpositions personnalisées
Google Maps - Ajouter un marqueur
Le constructeur Marker crée un marqueur. Notez que la propriété de position doit être définie pour que le marqueur s'affiche.
Ajoutez le marqueur à la carte en utilisant la méthode setMap() :
Exemple
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google Maps - Animer le marqueur
L'exemple ci-dessous montre comment animer le marqueur avec la propriété animation :
Exemple
var
marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google Maps - Icône au lieu de marqueur
L'exemple ci-dessous spécifie une image (icône) à utiliser à la place du marqueur par défaut :
Exemple
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Maps - Polyligne
Une polyligne est une ligne tracée à travers une série de coordonnées dans une séquence ordonnée.
Une polyligne prend en charge les propriétés suivantes :
- chemin - spécifie plusieurs coordonnées de latitude/longitude pour la ligne
- strokeColor - spécifie une couleur hexadécimale pour la ligne (format : "#FFFFFF")
- strokeOpacity - spécifie l'opacité de la ligne (une valeur comprise entre 0,0 et 1,0)
- strokeWeight - spécifie le poids du trait de la ligne en pixels
- modifiable - définit si la ligne est modifiable par les utilisateurs (vrai/faux)
Exemple
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Maps - Polygone
Un polygone est similaire à une polyligne en ce sens qu'il consiste en une série de coordonnées dans une séquence ordonnée. Cependant, les polygones sont conçus pour définir des régions dans une boucle fermée.
Les polygones sont constitués de lignes droites et la forme est "fermée" (toutes les lignes se connectent).
Un polygone prend en charge les propriétés suivantes :
- path - spécifie plusieurs coordonnées LatLng pour la ligne (la première et la dernière coordonnées sont égales)
- strokeColor - spécifie une couleur hexadécimale pour la ligne (format : "#FFFFFF")
- strokeOpacity - spécifie l'opacité de la ligne (une valeur comprise entre 0,0 et 1,0)
- strokeWeight - spécifie le poids du trait de la ligne en pixels
- fillColor - spécifie une couleur hexadécimale pour la zone dans la région fermée (format : "#FFFFFF")
- fillOpacity - spécifie l'opacité de la couleur de remplissage (une valeur comprise entre 0,0 et 1,0)
- modifiable - définit si la ligne est modifiable par les utilisateurs (vrai/faux)
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
});
Google Maps - Cercle
Un cercle prend en charge les propriétés suivantes :
- center - spécifie le google.maps.LatLng du centre du cercle
- rayon - spécifie le rayon du cercle, en mètres
- strokeColor - spécifie une couleur hexadécimale pour la ligne autour du cercle (format : "#FFFFFF")
- strokeOpacity - spécifie l'opacité de la couleur du trait (une valeur comprise entre 0,0 et 1,0)
- strokeWeight - spécifie le poids du trait de la ligne en pixels
- fillColor - spécifie une couleur hexadécimale pour la zone à l'intérieur du cercle (format : "#FFFFFF")
- fillOpacity - spécifie l'opacité de la couleur de remplissage (une valeur comprise entre 0,0 et 1,0)
- modifiable - définit si le cercle est modifiable par les utilisateurs (vrai/faux)
Exemple
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - Fenêtre d'informations
Afficher une InfoWindow avec du contenu textuel pour un marqueur :
Exemple
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);