css - Draw Google static map image

Question

I am using google static map API for draw google maps image in my Angularjs Application.

https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318 &markers=color:red|label:C|40.718217,-73.998284 &key=YOUR_API_KEY

Its working fine for low number of map coordinate. But if have large number of map coordinate then it is not drawing map image.

for e.g. following will draw image for low number of coordinate but if i increase that size then it will not draw.

Static-image

Edit:- I am getting error for this Google Map Image URL

<img src="https://maps.googleapis.com/maps/api/staticmap?size=250x200&amp;path=color:0xff0000ff|weight:244.30293238565196,-68.2665974476563|44.26430994731785,-68.59496553374657|44.20606070761473,-69.06737764312157|44.147753811174056,-69.53978975249657|44.089389261368325,-70.01220186187157|43.936105944717674,-70.34179170562157|43.82445052728625,-70.37201176400083|43.73164134868192,-70.41046391243833|43.64663847098533,-70.47638188118833|43.57743518513326,-70.66314945931333|43.44437361651832,-70.72906742806333|43.23502731999249,-71.00372563118833|43.233426444457265,-71.41571293587583|43.17977400492627,-71.70135746712583|43.04583797528442,-72.02545414681333|42.89148948825737,-72.45941410775083|43.060861371343265,-73.004150390625|43.11381613521644,-73.641357421875|42.95803046045969,-74.520263671875|43.05925574419876,-75.179443359375|43.07209774714582,-75.838623046875|43.060861003899674,-76.409912109375|43.04159327590035,-76.6845703125|42.96606994513872,-77.1240234375|42.995004641918136,-77.607421875|43.023925721405675,-78.0908203125|42.99661158276462,-78.826904296875|43.129853405408575,-79.189453125|43.08413444433945,-79.2498779296875|43.03436614889081,-79.2333984375|42.95642183628041,-79.2828369140625|42.87837867059265,-79.332275390625|42.91298726881428,-79.530029296875|42.94757644320124,-79.6673583984375|42.95802978568438,-79.8486328125|42.85180523556103,-80.15625|42.82199730461899,-80.39794921875|42.856637519467114,-80.6121826171875|42.794593516370284,-80.8319091796875|42.7849186816881,-81.068115234375|42.77524233477264,-81.3043212890625|42.57169053620841,-81.54052734375|42.39993233071362,-81.80419921875|42.33743170402784,-81.97998046875|42.266739300090855,-82.06787109375|42.151185850682765,-82.3260498046875|42.084361523979666,-82.496337890625|42.31787163983394,-83.04150072288871|43.150630239407846,-82.55810228538871|43.65508864481128,-81.87694994163871|43.80750962183118,-80.91015306663871|44.16480237740625,-79.61376634788871|44.268738635035874,-78.73486009788871|43.97851946417654,-78.40822311680358|44.06699784978547,-77.77101608555358|44.20261832258035,-76.87013717930358|44.38703098507651,-76.56182687398285|44.66586537627746,-76.27618234273285|44.92781048570904,-76.03448312398285|45.350934970260454,-75.80377023335785|45.53285201085261,-75.27642648335785|45.614369581554406,-74.91387765523285|45.62666378279735,-74.44146554585785|45.73105618069394,-74.01299874898285|46.11013137338405,-74.33160226460785|46.13754402785938,-74.63921945210785|46.263442671779885,-74.50927734375|46.34422166043787,-74.3829345703125|46.39576937322028,-74.2620849609375|46.4131936539471,-74.1192626953125|46.449539361120124,-73.9544677734375|46.48586083134607,-73.7896728515625|46.52215806620057,-73.6248779296875|46.59618976940811,-73.487548828125|46.71350244599995,-73.4271240234375|46.741691567222,-73.2183837890625|46.770293402903384,-73.0645751953125|46.758679967095574,-72.8173828125|47.16307181424742,-73.1529808779452|47.16307181424742,-73.6363793154452|47.03593412582499,-74.0538597841952|46.90849280227558,-74.4713402529452|46.780747750452306,-74.8888207216952|46.652698883018346,-75.3063011904452|46.52434611849189,-75.7237816591952|46.395689381290765,-76.1412621279452|46.26672860177734,-76.5587425966952|46.13746371630336,-76.9762230654452|46.00789466725463,-77.3937035341952|45.878021403096156,-77.8111840029452|45.836454050187726,-78.387451171875|45.706179285330855,-78.804931640625|45.50634690108343,-79.1015625|45.437008288673916,-79.29931640625|45.3212543611715,-79.82666015625|45.20526345616242,-80.35400390625|45.089035564831065,-80.88134765625|44.97257068224067,-81.40869140625|44.8558688073573,-81.93603515625|45.026950453185506,-82.55126953125|45.406163745160214,-83.5400390625|45.78284835197681,-84.57275390625|46.15700496290808,-85.60546875|46.23305294479828,-86.517333984375|46.03510927947334,-87.308349609375|45.836454050187726,-88.099365234375|45.67548217560647,-88.681640625|47.99727386804474,-88.90960693359375|48.00872694070618,-89.422384747362|48.078505101664575,-90.037619122362|48.1481887505854,-90.652853497362|48.10785710345748,-90.740744122362|48.225097592060386,-90.872580059862|48.078505101664575,-91.268087872362|48.08217501817276,-91.575705059862|48.19215079157971,-91.861349591112|48.34937203373956,-92.0645966614245|48.33841880508485,-92.300802716112|48.23607514890092,-92.333761700487|48.331115344958384,-92.4820771301745|48.4838455701099,-92.8289794921875|48.596807287341846,-93.0212861982888|48.527734567191324,-93.5541231123513|48.54228403147538,-93.8177949873513|48.658529250749524,-94.1913301436013|48.72742329875959,-94.5923311201638|48.78536623015411,-94.9933320967263|48.87215533860201,-95.2405244795388|48.886605576629925,-95.6360322920388|48.78898544442703,-96.0205537764138|48.73104669003351,-96.44567453376897|48.76002442116329,-96.97301828376897|48.556829314722485,-97.20373117439397|48.05994259338911,-97.20373117439397|47.73584772768336,-97.09386789314397|47.40972298357073,-96.98400461189397|47.08156627951654,-96.87414133064397|46.901714603324805,-96.89611398689397|46.85665710610569,-97.45641672126897|46.87168047601221,-98.25841867439397|46.856657106105665,-99.59875070564397|46.84162953184038,-100.93908273689397|46.84914384452681,-101.35656320564397|46.84162953184038,-101.70812570564397|46.85942776594315,-102.17122371104136|46.836908509818876,-102.52382337134662|46.836908509818876,-103.17201673072162|46.927018815938936,-103.50160657447162|46.69689933783226,-103.1873880996809|46.55354342736759,-103.1873880996809|46.466590932064314,-103.2972513809309|46.334004985632575,-103.3521830215559|46.201096815989914,-103.4071146621809|46.06786635694667,-103.4620463028059|45.89227322605981,-103.3906351699934|45.71612317089835,-103.3192240371809|45.62399767612874,-103.5114847793684|45.45470708776329,-103.5444437637434|45.28490676739647,-103.5774027481184|45.106843195509484,-103.5609232559309|44.908773558866855,-103.6488138809309|44.70611502538482,-103.8685404434309|44.408641060860944,-103.8575541153059|44.36153247411174,-103.7147318496809|44.2947304163488,-103.4565531387434|44.14907472653383,-103.2807718887434|44.08203102595271,-102.9072367324934|44.089922468098244,-102.6106058731184|44.018861590211884,-102.2920023574934|43.939805054682495,-102.2755228653059|43.85829677916183,-102.3431396484375|44.39294241085277,-104.60455664806784|44.17271904794254,-105.94488867931784|44.014911263473984,-106.60406836681784|43.05922556775775,-106.47223242931784|42.898472569367925,-105.83502539806784|42.70501434121029,-105.19781836681784|41.990496203270155,-105.06598242931784|41.26786671462826,-104.93414649181784|40.537150041291156,-104.80231055431784|39.84900208721642,-105.00006446056784|39.66893673818376,-105.3988234468572|39.580290274408675,-106.34765625|39.6479973237342,-106.9189453125|39.54641191968676,-107.666015625|39.257778150283386,-108.2373046875|39.2067188449185,-108.80859375|38.950865400920016,-109.423828125|38.96795115401596,-110.006103515625|38.91670933461174,-110.58841463386983|38.83117764105863,-111.08279939949483|38.745543050043906,-111.57718416511983|38.91670933461174,-112.02762361824483|38.48802257459572,-112.25833650886983|38.246836818905756,-112.28030916511983|38.0913647261547,-112.39017244636983|37.86620899033695,-112.50003572761983|37.64036318932431,-112.60989900886983|37.837234243696585,-112.91134807934924|38.536678009385675,-112.71359417309924|39.08456354876798,-112.38400432934924|39.62822655463809,-112.24118206372424|39.94549031786236,-111.84303557030785|40.64933613443504,-111.88698088280785|41.16413074975152,-111.95289885155785|41.740527438925064,-112.18361174218285|42.39298713963626,-112.27150236718285|43.04676320574944,-112.48024260155785|43.89190598131474,-111.65626799218285|44.40430574956993,-111.35963713280785|44.57672567556643,-110.73341642968285|45.06021210175154,-111.05509703772327|45.392932919133095,-111.36271422522327|45.5914397852913,-111.2272268844116|45.83308632726237,-111.3590628219116|45.89429051706444,-111.6502005172241|45.875171445875104,-112.1226126265991|45.97451876492385,-112.4796682906616|46.23730877687327,-112.29848821416527|46.225909172465585,-112.15017278447777|46.445881955651835,-112.00735051885277|46.706421459451924,-112.01284368291527|46.965709503439555,-112.02383001104027|47.2871292803084,-112.16665227666527|47.487958699120846,-112.38637883916527|47.7840778067928,-112.15566594854027|47.96094405046076,-112.29848821416527|48.11520697297621,-112.45778997197777|48.331129770891934,-112.59511907354027|48.444215824815956,-112.85879094854027|48.535231252839395,-113.13344915166527|48.62971404201499,-113.33120305791527|48.75981008089207,-113.7908935546875|48.63288072674892,-113.91710986447083|48.436461988506586,-114.02697314572083|48.36352088141846,-114.24669970822083|48.12940624138611,-114.37853564572083|48.033990970339815,-114.73009814572083|47.96783055551521,-115.12560595822083|48.158729184570966,-115.43322314572083|48.400004

Answer 1

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`dCswoy{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~}[qywbA_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}@peftcAsrMfdwB}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@zwhhC~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" />