Draw Google Static Map Image

Draw Google static map image

You should check the response header to figure out what is wrong with your static maps request.

The Google Static Maps API may issue an error or warning when something goes wrong. You should check for warnings in particular if you notice that something is missing from the map. It's also a good idea to check for warnings before launching a new application. Note that the warnings may not be immediately apparent because they appear in the HTTP header.

source: https://developers.google.com/maps/documentation/static-maps/intro#Moreinfo

The X-Staticmap-API-Warning header will contain explanation about error or warning. As I can see in the documentation there are certain limits for the number of geocoded locations or the number of polyline vertices (15). This is documented in

https://developers.google.com/maps/documentation/static-maps/error-messages#warnings

I hope this information might help to troubleshoot your issue.

UPDATE

Static Maps URL from your example is too long. It contains 16187 symbols. The Static Maps API restricts a maximum length of the URL to 8192 characters. The sample URL gets an error

If you need so long path you should implement encoded polyline calculation as described in

https://developers.google.com/maps/documentation/utilities/polylinealgorithm

and apply it in your URL.

I created a simple JavaScript code that converts your coordinates to encoded polyline. You can see it on https://jsfiddle.net/xomena/tqv2zsq0/. The encoded polyline has 3064 characters that is within allowed limit.

Now you can use it in the URL as shown in this code snippet (run it to see result)

<img src="https://maps.googleapis.com/maps/api/staticmap?size=250x200&path=color:0xff0000ff|weight:2|enc:i|kmGfit_LjpFhc_A`kJpg{AlkJpg{AvkJpg{A~|\|j_AzxTz{D`cQhoFfrO~zKnoLhnc@t~X~zKj{g@rst@~HzmoAjnIhxv@`dYph~@tc]fwsAqa`@rkiB_jIpm{Btl]btjDuwRzv_CgoAzv_CfeApqnBlwBrst@~vMpytAysDfl}AysDfl}AviDnwnCw_Y|xeAv|GtxJ~uH_fBdfN~sHvfN~sHiwE|re@ewEhyYi`A|kb@zvSra{@hyDren@owE|yh@xbKh|i@l{@hcm@n{@fcm@dwf@hcm@np`@|nr@reKria@xxLhdPdqUrlq@t`Lhg`@mrl@fniBwsaDgl}A{oaBe`dCsw\oy{DaxdAke|FshSetjDztw@ox~@_hPom{BsnYo}nDq_c@}e{@wmu@ixv@cdr@sen@osqA}`l@_pb@{~eBo|N}xeAykAqg{AokS}trAe`iAff}@ijDra{@{qWckX{wNutWeaIirV{kBs{ZebF}d_@_bF_e_@{aF}d_@umMiyYe|UuxJeoDswg@wqDg`]pgA_ho@m~mAnp`A?fl}AryWfppAn{WfppAj}WfppAh_XfppAdaXfppAbcXfppA~dXfppA|fXfppAxhXfppAtjXfppAxbGtpoBdmXfppA|_f@||x@jpL~re@nrUz~eB|sUz~eBjuU|~eB|vUz~eBjxU|~eBgl`@ddwBaaiAxb`EiqhAluhEmahAnuhEizMbbqDbte@znyCrxe@znyC`m^dvpBendMxok@sfAxccBcsLfdwBorLddwB`{FhdPw{U~vXds[|flA}Ura{@inTfxv@su]huf@lcAfcm@r~R~lE_qQ~}[qy\bwbA_aU|pd@vnLdagB}yA|nr@quUr}gAqmLfimAeiJfimAm}O|go@iyA|flAbaRfbjAbiJ~_rAatD|~eB|tf@|`l@p``B?ph~@smThu~@umT|a_AsmTbcb@hhCpxG|llB{|Ans{Cz|A`xdG||A`xdG}m@fppA|m@htcAgnBhmyAvkCvzcA?fr}BerP|j_Af}k@{j|@~~Z?l~OrmTt{XhvIr}XhvIt_YjvInha@i}L|ka@k}Lv~Prpd@`a`@~lEfd`@~lE|wa@_fB|te@hdPpqf@h|i@fby@ucAleHs{Zn`Lslq@jm[sia@~aLq}gAip@}|x@b{Lif}@`mN_fBl|NreLolgBztxLj_j@`xdGhy]zv_C~syD_wXvk^om{Bbxd@qm{BtpjC_wXlclC}vX~umC_wX|keC|re@jdb@f{lA`iPfixDefLpqnB|yRd|pC|jw@nqnBb~HpqnB`~p@fdwBwiBdvpBf_IlvpBpuO|p_BfvOzp_Byl`@f~vAhvrA~`l@jbn@hhCvj]rmTd~j@tmTpbk@rmTmme@`{y@qrgC_se@g_jB}j_A}diBs{Z{}|@kwlAanhCrqGmpcB~zKoqoB|`l@{l~BhdPau~Brwg@eadDy|_DoacB}|x@st`@{hyBwl}Any}@o~_Apa{@uwe@wmYien@|vXo}Jrzw@nvBpg{A}kRrvdAmir@kkb@ffA_~[y}i@s{Zk{q@ha@qsq@tcA{w}@r{Zeff@h|i@wyx@}`l@kpa@r{Zec]rb^odi@hyYyaU|nr@ywPrst@omQ|re@clX`xxAhxWzsWrje@rmTzfMh|i@dvl@~vXjsQftcAn|K|flAchd@pa{@}bn@|flAwsi@ftcAl`u@{bA??ro|@r}gAhxlAfhjBl|NzllBjpj@ff}@hvj@ff}@fkC|zrBhkCzzrB_hYff}@pe\ftcAsrMfdwB}rm@zzrBglm@zzrBrfF||x@kuT|nr@m{AfdwBj~h@|xeA`ey@s}gAxss@gnc@j`jAkdPnqjAihClj^lbTn}G_iRr{\}vXh~\_wXfa`@_iRjqOria@ru^rwg@p`t@t{Zl}~ApaWjijAidPngiAh|i@zj`A|vXlhmA_{Kvni@scAlcs@_{KxyRmnuA~gM_{Klk`@s_Nd~RosO`p`@ucAzr`@r_NhfJ~vXpfJ~vXr`l@_{KbfB|flAxyCftcAhag@xqOhhWihCtsd@woiAzda@qabDhbYirV~cYgrVbud@|lE`~q@jhCfdr@hhCr_t@_wXdft@}vXxlt@_wXlst@}vXe`Di|i@|lL}j_AlpVsoaAr`DsmT|ad@idP~dd@idPliSsia@hjS_se@?g|i@xld@`_N|lSqj{@thNalaB??xbDq}gA_pGsoaAnjN}`l@bn_@uqGnlr@sqGtny@idP`vy@idPseWsst@q{X{v_C??vx_@}|x@hbKif}@h`R}d_@vce@smTzfe@hvIxie@hvIxll@}`l@zw\hhC~pWhnc@xb[fjp@paMroaAzaMhdPt_{@ivIhuPidPraF}nr@`u`@kdP`iT}zKrcf@}p_B????zfe@ozpApjSizlCwcFmybHrhMa|wFvidDqm{BdikFq}gAfz{BidPpe`@s}HfgeAh|i@v`fFsia@|mdBc~}Dtj{@eldEo|\ecqCmeLc~}D|d]oeuC|{b@i`]bo}@}nr@d{uDsoaAdieCinc@v}Y{byA~|sA}j_Ar}}A}`l@jcfB|d_@vjpBsmT`seAgl}Afhh@{jfDhkf@}re@b~kA}j_Afrb@gbjAxop@qihCfrr@quaB`vn@}nr@~t|Ai`]|~|Ai`]th}Ag`]~eg@sa{@djq@s}gAlrcA~hRhwcAsqGvcKijp@w_A}xeAv_A}xeAnfQsen@bl]qa{@yRoxq@hgQinc@rn_@q}gA_cG{v_CthnAsytAlo[}|x@wghAq}gAnp_@}trAthfAgppA|gMe|pC`lSos{Ch`As}gA~_p@enjC_mS}xeA_}`BgbjA}~w@qg{A``AefdD~hQo}nD{vk@y|_D{nuAkyk@wrpC}nr@{ocAgf}@kn_Bixv@g_AdpwDe_AbpwDabc@puaB_npFgmjAo_dGa`kFydiGgqcLcxF{nyCn{Bcd~EqtJw|fGweaAwmaIkzgHquaBu{aGra{@mreIbtjDyqqHsqGsuoGoabDm`oGoy{DophDoeuCowfDyb`Ei|eQoabDnfJuz[&markers=icon:http://192.168.1.194/public/images/g-pin-icon.png|size:mid|44.30293238565196,-68.2665974476563&markers=icon:http://192.168.1.194/public/images/r-pin-icon.png|size:mid|38.824961714032675,-76.99821031969634&markers=color:red|size:mid&maptype=roadmap&sensor=false&key=AIzaSyCROTlQkfNOnb5oZxUTCXPvz9Dz_xwRXzo" />

draw overlay line on google static map with markers

http://maps.google.com/maps/api/staticmap?size=400x400&zoom=13&path=color:0xff0000ff|weight:5|40.737102,-73.990318|40.749825,-73.987963&markers=color%3ablue|label%3aS|40.737102,-73.990318|40.749825,-73.987963&sensor=false

Your path lat/lng is missing from the second link

Is it possible to draw a circle on a Google static map?

What you could do is use the encoded polyline algorithm to produce enough points to get a roughly circular path. There's definitely coding involved: you'd need to get the center and radius of your circle, turn that into a series of lat/longs, then encode using the algorithm.

As an alternative, you might be able to use a transparent gif image as a marker and put that in your map.

How to add custom marker image Google Static Map

Yes, the documentation has a section explaining how to use your own images instead of their markers:
https://developers.google.com/maps/documentation/staticmaps/intro#CustomIcons

e.g.

https://maps.googleapis.com/maps/api/staticmap?markers=icon:http://www.example.com/yourimage.png

Here's an example using an encoded polyline too.

https://maps.googleapis.com/maps/api/staticmap?markers=icon:http://www.gravatar.com/avatar/e5594b71e9f54f3e73f6294b054f5616?s=32%26d=identicon%26r=PG|54.763228,-130.617302&size=400x400&path=weight:3%7Ccolor:orange%7Cenc:_fisIp~u%7CU}%7Ca@pytA_~b@hhCyhS~hResU%7C%7Cx@oig@rwg@amUfbjA}f[roaAynd@%7CvXxiAt{ZwdUfbjAewYrqGchH~vXkqnAria@c_o@inc@k{g@i%60]o%7CF}vXaj\h%60]ovs@?yi_@rcAgtO%7Cj_AyaJren@nzQrst@zuYh%60]v%7CGbldEuzd@%7C%7Cx@spD%7CtrAzwP%7Cd_@yiB~vXmlWhdPez\_{Km_%60@~re@ew^rcAeu_@zhyByjPrst@ttGren@aeNhoFemKrvdAuvVidPwbVr~j@or@f_z@ftHr{ZlwBrvdAmtHrmT{rOt{Zz}E%7Cc%7C@o%7CLpn~AgfRpxqBfoVz_iAocAhrVjr@rh~@jzKhjp@%60%60NrfQpcHrb^k%7CDh_z@nwB%7Ckb@a{R%7Cyh@uyZ%7CllByuZpzw@wbd@rh~@%7C%7CFhqs@teTztrAupHhyY}t]huf@e%7CFria@o}GfezAkdW%7C}[ocMt_Neq@ren@e~Ika@pgE%7Ci%7CAfiQ%7C%60l@uoJrvdAgq@fppAsjGhg%60@%7ChQpg{Ai_V%7C%7Cx@mkHhyYsdP%7CxeA~gF%7C}[mv%60@t_NitSfjp@c}Mhg%60@sbChyYq}e@rwg@atFff}@ghN~zKybk@fl}A}cPftcAite@tmT__Lha@u~DrfQi}MhkSqyWivIumCria@ciO_tHifm@fl}A{rc@fbjAqvg@rrqAcjCf%7Ci@mqJtb^s%7C@fbjA{wDfs%60BmvEfqs@umWt_Nwn^pen@qiBr%60xAcvMr{Zidg@dtjDkbM%7Cd_@

drawing a path on google static map

when distance between two cities grows, the polyline variable will include lot of Glatlang values. so it causes to exceed the url character limit (What is the character limit on URL).
we can't send long url that exceed the charcter limit using ajax request. that's why I got that broken image.
As the solution I ignored intermediate Glatlang values by incrementing the for loop with skipping values. Therefore the polyline can be accepted for zoomed out maps.

Google Static Maps, draw custom route direction

Google Static Maps API allows to draw geodesic lines

geodesic: (optional) indicates that the requested path should be interpreted as a geodesic line that follows the curvature of the earth. When false, the path is rendered as a straight line in screen space. Defaults to false.

https://developers.google.com/maps/documentation/static-maps/intro#Paths

Add this option to your path parameter. Additionally you can add a custom plane icon that overlaps the geodesic path.

For example,

https://maps.googleapis.com/maps/api/staticmap?size=600x400&path=weight%3A5%7Ccolor%3A0x111111%7Cgeodesic%3Atrue%7CAmsterdam%7CTashkent&markers=icon%3Ahttps%3A%2F%2Fcdn0.iconfinder.com%2Fdata%2Ficons%2Fshopping-and-e-commerce-2%2F400%2FCargo_plane_icon-64.png%7C47.557774%2C43.044347&key=YOUR_API_KEY

Run the following code snippet to see it in action

<img src="https://maps.googleapis.com/maps/api/staticmap?size=600x400&path=weight%3A5%7Ccolor%3A0x111111%7Cgeodesic%3Atrue%7CAmsterdam%7CTashkent&markers=icon%3Ahttps%3A%2F%2Fcdn0.iconfinder.com%2Fdata%2Ficons%2Fshopping-and-e-commerce-2%2F400%2FCargo_plane_icon-64.png%7C47.557774%2C43.044347&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&signature=Y-EtK76SDUyAao0uuGniNx3LhWs="  title="sample geodesic path" />

---

Related Topics