Paramètre 'markers' ajouter et personnaliser des marqueurs sur une carte

Utiliser le paramètre markers pour insérer un ou plusieurs marqueurs sur une carte statique

Le paramètre markers permet de définir les caractéristiques d'un ou plusieurs marqueurs à afficher sur carte statique.
Il est  facultatif , et doit respecter la régle d'écriture suivante :

markers=style_marqueurs|emplacement_marqueur_1|emplacement_marqueur_2|emplacement_marqueur_3| ... etc.

Les informations de style et les informations d'emplacement étant toutes deux délimitées à l'aide du caractère pipe '|", les informations de style doivent apparaître en premiers dans n'importe quel descripteur de marqueur. Une fois que le serveur de Carte Statique rencontre un emplacement dans le descripteur de marqueur, tous les autres paramètres de marqueur sont considérés comme étant également des emplacements.

Si plusieurs marqueurs doivent être affichés, les chaînes de caractères définissant chaque marqueur seront séparées par le caractère pipe | (ou | en ASCII si vous encodez vos URL).

<img src="http://maps.googleapis.com/maps/api/staticmap?size=largeur_pixelsxhauteur_pixels&markers=style_marqueurs|emplacement_marqueur_1|emplacement_marqueur_2|emplacement_marqueur_3&sensor=false" alt="Carte Google Maps Statique comportant 3 marqueurs" />

Les styles de marqueurs

Le style d'un marqueur, est défini à l'aide d'une série de valeurs séparées par le caractère pipe "|" :

• size: ( facultatif ) spécifie la taille du marqueur :
  • tiny (minuscule),
  • mid (moyen),
  • small (petit),
  • Si la taille n'est pas définie, la taille par défaut sera appliquée au marqueur (normal).
• color: ( facultatif ) spécifie la couleur du marqueur, codée sous 24 bits (Exemple : color=0xFFFFCC)ou parmi l'une des couleurs ci-dessous
  • black (noir),
  • brown (brun),
  • green (vert),
  • purple (violet),
  • yellow (jaune),
  • blue (bleu),
  • gray (gris),
  • orange (orange),
  • red (rouge),
  • white (blanc).
• label: ( facultatif ) spécifie le caractère alphanumérique majuscule {A-Z et 0-9} s'affichant dans le marqueur. Notez que seuls les marqueurs de tailles par défaut (normal) et mid (moyenne) sont capables d'afficher un caractère alphanumérique majuscule. Les autres marqueurs, tiny (minuscule) et small (petit), ne sont pas en mesure d'afficher un caractère alphanumérique majuscule.

Emplacement du marqueur

Chaque descripteur de marqueur doit contenir un jeu d'un ou plusieurs emplacements situant chaque marqueur sur la carte. Ces emplacements peuvent être spécifiés sous forme de coordonées GPS latitude,longitude ou d'adresses postales. Les emplacements sont séparés les uns des autres en utilisant le caractère de pipe " | ".

Les paramètres d'emplacement définissent l'emplacement du marqueur sur la carte. Si l'emplacement du marqueur est situé en dehos de la carte, ce marqueur n'apparaîtra pas si l'image est construite en fournissant les paramètres center et zoom. Par contre, si ces paramètres ne sont pas fournis, le serveur de carte statique construira automatiquement une image qui contiendra les marqueurs fournis. (Voir le Positionnement Implicite ci-dessous.)

• Coordonnées GPS :
  • latitude : ( obligatoire ) spécifie la latitude avec une précision de 6 décimales maxi après la virgule,
  • longitude : ( obligatoire ) spécifie la longitude avec une précision de 6 décimales maxi après la virgule.

• Adresse postale.

Personnaliser les marqueurs

Plutôt que d'utiliser les icônes de marqueurs proposées par Google, vous pouvez utiliser vos propres icônes personnalisées. Les icônes personnalisées sont spécifiées en utilisant les descripteurs suivants dans le paramètre markers :

• icon spécifie l'URL de l'icône personnalisée à utiliser pour le marqueur. Les images peuvent être dans le format PNG, JPEG ou GIF. Le fomat PNG est recommandé.
• shadow (true par défaut) indique que le service de Cartes Statique devra construire une ombre appropriée pour l'image. Cette ombre est basée sur la région visible de l'image et son opacité/transparence.

Le paramètre icon doit être spécifié à l'aide d'une URL (qui doit être encodée : URL_encoded). Vous pouvez utiliser n'importe quelle URL valable de votre choix, ou un service générant des alias courts d'URL comme http://bit.ly ou http://tinyurl.com. La plupart des services générant des alias courts d'URL ont l'avantage d'encoder 'automatiquement les URL. La taille des icônes est limitée à 4096 pixels (64x64 pour des images carrées) et le service de Cartes Statique autorise jusqu'à cinq icônes personnalisées uniques par requête. Notez que chacune de ces icônes unique, peut être utilisée plusieurs fois dans la carte statique.

Les icônes personnalisées qui ont un descripteur shadow:true (par défaut) auront leur "le point d'ancre" le jeu comme le centre du bas de l'image d'icône fournie, dont l'ombre est jetée. Par contre, les icônes sans ombre (descripteur shadow:false) sont considérés comme étant des icônes centrées sur leurs emplacements indiqués, donc leurs points d'ancrage est localisé au centre de l'image.

L'exemple suivant utilise Map Icons Collection pour créer des marqueurs personnalisés, montrant plusieurs châteaux situés en Touraine :

<img src="http://maps.googleapis.com/maps/api/staticmap?size=640x320&markers=icon:https://www.touraineverte.fr/map-icons-collection-2.0/icons/castle.png|Rue+de+la+Concorde,37403,Amboise,FR|rue+du+chateau,37500,Chinon,FR|rue+lavoisier,37000,tours,FR&sensor=false" alt="Carte Google Maps statique avec marqueur personnalisé" />

Notez :
Si vous utilisez Google Chart API, celui-ci, comme l'API de Cartes Statique Google, utilise le caractère pipe " | " pour délimiter des paramètres dans ses URL. N'importe quelles URL d'icône contenant un tel caractère causeront que le service de Carte Statique interprète le caractère de pipe comme un délimiteur de paramètre avant l'évaluation de l'URL. Si vous voulez utiliser une URL contenant un caractère pipe, vous pouvez "doubler - codent" la pipe à %7C, qui décode à | et assurera que n'importe quelle pipe que vous placez dans l'URL de l'icône n'est pas interprétée par le service de Carte Statique. (Nous avons utilisé ce tour ci-dessus.)

L'exemple ci-dessous montre comment une telle URL s'occupera du codage double le caractère(personnage) de pipe :

# URL originale :
http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|996600

# URL encodée :
http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|996600

# Double encodage pour le caractère "|" :
http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe%7C996600

La taille, la couleur et le caractère alphabétique définissent l'aspect visuel du marqueur. Si aucune taille n'est indiquée, le marqueur s'affiche, par défaut, en taille "normal".

Si aucune valeur n'est indiquée, le marqueur rouge par défaut s'affiche :

Carte comportant 3 marqueurs ayant le même style

• Style commun à tous les marqueurs :

• Localisation du premier marqueur :

• Localisation du second marqueur :

• Localisation du troisième marqueur :

Il ne reste plus qu'à lier le style et les information relatives à nos trois marqueurs avec le caractère 'pipe' |

markers=color:blue|label:A|47.389750,0.689049|47.389401,0.720463|rue+Bretonneau,37000,Tours,FR

et à insérer l'ensemble dans la balise <img />

<img src="http://maps.googleapis.com/maps/api/staticmap?size=640x320&markers=color:blue|label:A|47.389750,0.689049|47.389401,0.720463|rue+Bretonneau,37000,Tours,FR&sensor=false" alt="Carte Google Maps Statique comportant 3 marqueurs" />

Carte comportant 3 marqueurs ayant un style différent

• Caractéristiques et localisation du premier marqueur :

• Caractéristiques et localisation du second marqueur :

• Caractéristiques et localisation du troisième marqueur :

Il ne reste plus qu'à lier nos trois marqueurs avec le caractère 'esperluette' &

markers=color:blue|label:S|47.389750,0.689049&markers=color:green|size:tiny|47.389401,0.720463&markers=color:orange|size:mid|label:8|rue+Bretonneau,37000,Tours,FR

et à insérer l'ensemble dans la balise <img>

<img src="http://maps.googleapis.com/maps/api/staticmap?size=640x320&markers=color:blue|label:S|47.389750,0.689049&markers=color:green|size:tiny|47.389401,0.720463&markers=color:orange|size:mid|label:8|rue+Bretonneau,37000,Tours,FR&sensor=false" alt="Carte Google Maps Statique comportant 3 marqueurs" />

Attention : si vous affichez des marqueurs sur votre carte, vous n'aurez pas besoin de préciser les paramètres suivants, normalement obligatoires :

• Le centre {center},
• le niveau de zoom {zoom}.

Ils seront définis implicitement par Google Maps Static, en s'appuyant sur la position des marqueurs à afficher.