Utilisation du paramètre path pour créer et afficher des polylines et polygones
Le paramètre path définit un tracé unique constitué de deux ou plusieurs points, chaque point étant relié au suivant à l'aide d'une ligne droite, l'ensemble venant se superposer à la carte. Ce paramètre prend une série de points séparés par le caractère pipe " | ". Le tracé est dessiné en tenant compte de l'ordre des points séparés par les 'pipes' " | ".
Il est facultatif .
color: (Facultatif) permet de spécifier la couleur selon deux méthodes.- une couleur RGB en utilisant un système 24 bits hexadécimal de la forme 0xffffff : color:0xffffff. Par défaut, la valeur de l'opacité est égale à 50%.
- une couleur RGB en utilisant un système 32 bits hexadécimal de la forme 0xffffffff : color:0xffffffff. Le quatrième octet (les deux derniers caractères) définit le canal de transparence alpha. L'utilisation de 32 bits hexadécimal vous permet de modifier la transparence des tracés que vous créez.
weight: (Facultatif) permet de préciser, en pixels, l'épaisseur du tracé.- Ligne bleue mince (1 pixel), 50% d'opacité : path=color:0x0000ff|weight:1
- Ligne rouge (5 pixels) : path=color:0xff0000ff|weight:5
- Ligne noire épaisse (10 pixels) : path=color:0xffffffff|weight:10
fillcolor: (Facultatif)- il permet de délimiter une zone polygonale et d'en spécifier la couleur de remplissage.
- Il n'est pas nécessaire de superposer le premier et le dernier point, les serveurs de cartes statiques les joignant automatiquement.
- Les tracés peuvent être dessinés à partir :
- de points : latitude,longitude. Les points étant séparés entre eux par des pipes "|",
- d'une polyline encodée. enc:polyline_encodée.
geodesic: (Facultatif)- Il permet d'indiquer que le tracé demandé doit être interprété comme une ligne géodésique qui suit la courbure de la Terre.
- C'est un booléen. S'il est défini sur false, le tracé est rendu sous la forme d'une ligne droite à l'écran. Par défaut : false.
path=color:{code_couleur_opacite_trait}|weight:{epaisseur_trait_en_pixel}|fillcolor:{couleur_remplissage_opacite_polygone}|geodesic:{boolean}
Exemple :
<img src="http://maps.googleapis.com/maps/api/staticmap?size=640x320&path=color:0xff0000|weight:5|47.407181,0.681496|47.409504,0.677204|47.410782,0.672913|47.410896,0.666904|47.409386,0.661068|47.407528,0.658321|47.404507,0.656261|47.401485,0.655746|47.396374,0.655231|47.391842,0.656776|47.388241,0.660381|47.386379,0.666218|47.385334,0.672054|47.383705,0.676346|47.381729,0.679092|47.380104,0.680466|47.377197,0.682526|47.378593,0.683899|47.379986,0.684929|47.382545,0.687847|47.385448,0.693169|47.388821,0.700893|47.392654,0.704842|47.396488,0.707245|47.401253,0.707245|47.406250,0.705528|47.409969,0.699005|47.411476,0.691452|47.410664,0.686817|47.407413,0.681324&sensor=false" alt="Dessine moi un coeur sur Tours" title="Dessine moi un coeur sur Tours" />
Tracé en forme de coeur : path
<img src="http://maps.googleapis.com/maps/api/staticmap?size=640x320&path=color:0xff0000|weight:5|47.407181,0.681496|47.409504,0.677204|47.410782,0.672913|47.410896,0.666904|47.409386,0.661068|47.407528,0.658321|47.404507,0.656261|47.401485,0.655746|47.396374,0.655231|47.391842,0.656776|47.388241,0.660381|47.386379,0.666218|47.385334,0.672054|47.383705,0.676346|47.381729,0.679092|47.380104,0.680466|47.377197,0.682526|47.378593,0.683899|47.379986,0.684929|47.382545,0.687847|47.385448,0.693169|47.388821,0.700893|47.392654,0.704842|47.396488,0.707245|47.401253,0.707245|47.406250,0.705528|47.409969,0.699005|47.411476,0.691452|47.410664,0.686817|47.407413,0.681324&sensor=false" alt="Dessine moi un coeur sur Tours" title="Dessine moi un coeur sur Tours" />
Polygone sans contours : fillcolor
Si on ne souhaite pas afficher le contour du polygone il suffit d'utiliser : color:0x00000000 - noir totalement transparent
<img src="http://maps.googleapis.com/maps/api/staticmap?size=640x320&path=color:0x00000000|weight:5|fillcolor:0xFF000055|47.407181,0.681496|47.409504,0.677204|47.410782,0.672913|47.410896,0.666904|47.409386,0.661068|47.407528,0.658321|47.404507,0.656261|47.401485,0.655746|47.396374,0.655231|47.391842,0.656776|47.388241,0.660381|47.386379,0.666218|47.385334,0.672054|47.383705,0.676346|47.381729,0.679092|47.380104,0.680466|47.377197,0.682526|47.378593,0.683899|47.379986,0.684929|47.382545,0.687847|47.385448,0.693169|47.388821,0.700893|47.392654,0.704842|47.396488,0.707245|47.401253,0.707245|47.406250,0.705528|47.409969,0.699005|47.411476,0.691452|47.410664,0.686817&sensor=false" alt="Carte Google Maps Statique - un coeur sur Tours" title="Carte Google Maps Statique - un coeur sur Tours" />
Polygone avec contours : fillcolor
Si on souhaite afficher le contour du polygone il suffit d'utiliser : color:0x0000FFFF - bleu totalement opaque
<img src="http://maps.googleapis.com/maps/api/staticmap?size=640x320&path=color:0x0000FFFF|weight:5|fillcolor:0xFF000055|47.407181,0.681496|47.409504,0.677204|47.410782,0.672913|47.410896,0.666904|47.409386,0.661068|47.407528,0.658321|47.404507,0.656261|47.401485,0.655746|47.396374,0.655231|47.391842,0.656776|47.388241,0.660381|47.386379,0.666218|47.385334,0.672054|47.383705,0.676346|47.381729,0.679092|47.380104,0.680466|47.377197,0.682526|47.378593,0.683899|47.379986,0.684929|47.382545,0.687847|47.385448,0.693169|47.388821,0.700893|47.392654,0.704842|47.396488,0.707245|47.401253,0.707245|47.406250,0.705528|47.409969,0.699005|47.411476,0.691452|47.410664,0.686817|47.407181,0.681496&sensor=false" alt="Carte Google Maps Statique - un coeur sur Tours" title="Carte Google Maps Statique - un coeur sur Tours" />
Polyline encodée : enc
Au lieu d'indiquer une série de points, vous pouvez déclarer le tracé en utilisant une polyligne encodée à l'aide du préfixe enc: dans la déclaration du path.
Notez que si vous fournissez un tracé sous la forme d'une polyligne encodée, vous n'avez pas besoin de spécifier les paramètres center et zoom, normalement obligatoires dans l'URL.
<img src="http://maps.googleapis.com/maps/api/staticmap?size=640x320&path=weight:4|color:red|enc:_fisIp~u|U}|a@pytA_~b@hhCyhS~hResU||x@oig@rwg@amUfbjA}f[roaAynd@|vXxiAt{ZwdUfbjAewYrqGchH~vXkqnAria@c_o@inc@k{g@i`]o|F}vXaj\h`]ovs@?yi_@rcAgtO|j_AyaJren@nzQrst@zuYh`]v|GbldEuzd@||x@spD|trAzwP|d_@yiB~vXmlWhdPez\_{Km_`@~re@ew^rcAeu_@zhyByjPrst@ttGren@aeNhoFemKrvdAuvVidPwbVr~j@or@f_z@ftHr{ZlwBrvdAmtHrmT{rOt{Zz}E|c|@o|Lpn~AgfRpxqBfoVz_iAocAhrVjr@rh~@jzKhjp@``NrfQpcHrb^k|Dh_z@nwB|kb@a{R|yh@uyZ|llByuZpzw@wbd@rh~@||Fhqs@teTztrAupHhyY}t]huf@e|Fria@o}GfezAkdW|}[ocMt_Neq@ren@e~Ika@pgE|i|AfiQ|`l@uoJrvdAgq@fppAsjGhg`@|hQpg{Ai_V||x@mkHhyYsdP|xeA~gF|}[mv`@t_NitSfjp@c}Mhg`@sbChyYq}e@rwg@atFff}@ghN~zKybk@fl}A}cPftcAite@tmT__Lha@u~DrfQi}MhkSqyWivIumCria@ciO_tHifm@fl}A{rc@fbjAqvg@rrqAcjCf|i@mqJtb^s|@fbjA{wDfs`BmvEfqs@umWt_Nwn^pen@qiBr`xAcvMr{Zidg@dtjDkbM|d_@&sensor=false" alt="Carte Google Maps Statique - Polyline encodée" />
Polygone encodé : enc - fillcolor
Vous pouvez également encoder des polygones et les insérer dans une carte Google Statique à l'aide de l'argument fillcolor: et du préfixe enc:
L'exemple ci-dessous affiche un polygone correpondant à la zone de Brooklyn, NY :
<img src="http://maps.googleapis.com/maps/api/staticmap?size=640x320&path=fillcolor:0xFF000066|color:0xFFFFFF00|enc:}zswFtikbMjJzZ|RdPfZ}DxWvBjWpF~IvJnEvBrMvIvUpGtQpFhOQdKpz@bIx{A|PfYlvApz@bl@tcAdTpGpVwQtX}i@|Gen@lCeAda@bjA`q@v}@rfAbjA|EwBpbAd_@he@hDbu@uIzWcWtZoTdImTdIwu@tDaOXw_@fc@st@~VgQ|[uPzNtA`LlEvHiYyLs^nPhCpG}SzCNwHpz@cEvXg@bWdG`]lL~MdTmEnCwJ[iJhOae@nCm[`Aq]qE_pAaNiyBuDurAuB}}Ay`@|EKv_@?|[qGji@lAhYyH`@Xiw@tBerAs@q]jHohAYkSmW?aNoaAbR}LnPqNtMtIbRyRuDef@eT_z@mW_Nm|B~j@zC~hAyUyJ_U{Z??cPvg@}s@sHsc@_z@cj@kp@YePoNyYyb@_iAyb@gBw^bOokArcA}GwJuzBre@i\tf@sZnd@oElb@hStW{]vv@??kz@~vAcj@zKa`Atf@uQj_Aee@pU_UrcA&sensor=false" alt="Carte Google Maps Statique - Polygone encodé" />