Paramètre 'path' affiche un polygone ou une polyline sur la carte statique

API Google Static Maps - Carte image statique exemples et tutoriels en Français

Cartographie et webmapping

Partager ce tutoriel sur les réseaux sociaux
Signaler une erreur dans cet article

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="https://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

Carte Google Maps Statique - un coeur sur Tours
<img src="https://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

Carte Google Maps Statique - un coeur sur Tours
<img src="https://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

Carte Google Maps Statique - un coeur sur Tours
<img src="https://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.

Carte Google Maps Statique - Polyline encodée
<img src="https://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 :

Carte Google Maps Statique - Polygone encodé
<img src="https://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%60q@v}@rfAbjA|EwBpbAd_@he@hDbu@uIzWcWtZoTdImTdIwu@tDaOXw_@fc@st@~VgQ|[uPzNtA%60LlEvHiYyLs^nPhCpG}SzCNwHpz@cEvXg@bWdG%60]lL~MdTmEnCwJ[iJhOae@nCm[%60Aq]qE_pAaNiyBuDurAuB}}Ay%60@|EKv_@?|[qGji@lAhYyH%60@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%60Atf@uQj_Aee@pU_UrcA&sensor=false" alt="Carte Google Maps Statique - Polygone encodé" />