Google Static Maps URL length limit

Officially you can use 8192 characters

This depends on browser and server, but as a thumb rule 8192 characters should be OK.

Server

Google Maps Static server https://maps.googleapis.com/maps/api/staticmap at 30 July 2019.

Google Static Maps Docs claims that:

Maps Static API URLs are restricted to 8192 characters in size. In practice, you will probably not have need for URLs longer than this, unless you produce complicated maps with a high number of markers and paths. Note, however, that certain characters may be URL-encoded by browsers and/or services before sending them off to the API, resulting in increased character usage.

But in practice, I'm getting errors (413 Payload Too Large) after 15k~ characters mark (30 July 2019):

╔═════════╦═════════════════╦══════════════════╗
║ Browser ║ Browser Version ║ Valid URL Length ║
╠═════════╬═════════════════╬══════════════════╣
║ Chrome  ║ 75              ║            15489 ║
║ Firefox ║ 68              ║            15761 ║
║ Safari  ║ 12.1            ║            15690 ║
╚═════════╩═════════════════╩══════════════════╝

This is based on data got by using fetch() in browser console. I'd assume that Google Static Maps server accepts requests (whole request, not just path) no larger than 16k in size.

Solutions

Reduce Precision

Our company policy is that coordinate data below 6 decimal places (111.32 mm) is useless (considering our market share uses phones and commercial GPS devices).

const decimalPlaces = 6 // decimal places count
const decimalPowered = 10 ** decimalPlaces // 1_000_000
const trim = number => Math.round(number * decimalPowered) / decimalPowered // function that trims number
const coordinates = [
  [51.838245, -111.834991],
  [51.8331, -111.835],
  [51.831007022306, -111.8232751234],
  [51.838244686875, -111.82327418214]
]
const trimmedCoordinates = coordinates.map(coordinate => coordinate.map(trim))
console.log(trimmedCoordinates)

Encode coordinates

If you have access to encoder you can replace path with an encoded path (use String manipulation instead of URLSearchParams, because searchParams automatically uses encodeURI, which would break your encoded path):

const coordinates = [
  [51.838245, -111.834991],
  [51.8331, -111.835],
  [51.831007022306, -111.8232751234],
  [51.838244686875, -111.82327418214]
].map(([lng, lat]) => ({ lng, lat }))

// path should be MVCArray<LatLng>|Array<LatLng>, if you have Polygon or Polyline, getPath() method should be fine
const path = coordinates.map(coordinate => new google.maps.LatLng(coordinate)) 

const encoded = google.maps.geometry.encoding.encodePath(
  path
);

return (
  url.href +
  `&path=fillcolor:${color}|color:${color}|enc:${encoded}`
);

https://developers.google.com/maps/documentation/maps-static/dev-guide https://developers.google.com/maps/documentation/utilities/polylinealgorithm https://developers.google.com/maps/documentation/javascript/geometry#Encoding

Handle Errors

• Use placeholder image
• Check if href.length > 8192 before request
• Trim coordinates
• Encode path
• Check if !res.ok && res.status === 413 and display error for user which claims that map is too detailed
• Use fallback image

The way i see it is either you reduce precision of your markers in order to gain space in the URL. (i.e. markers=13.72326,-86.13705---->markers=13.73,-86.14) resulting in placing the markers in a grid...
Or you go with a non static api

I had same problem,

i used link like this, and reduced position precision:

http://maps.googleapis.com/maps/api/staticmap?center=61.52401,105.318756&zoom=2&size=710x400&markers=|59,30|48,44|55,37|55,37|55,37|56,44|56,60|55,49|47,39|57,39|55,37|55,82|47,39|55,37|53,50|51,36|55,37|54,73|45,38|48,44|50,43|46,44|51,42|56,53|59,32|59,30|60,30|59,30|59,28|59,32|59,29|58,31|68,33|56,92|59,38|57,56|55,37|55,36|55,38|55,37|55,38|56,38|55,38|51,46|55,38|45,41|53,49|55,61|50,36|50,36|55,48|55,48|55,49|56,50|56,47|53,91|47,39|57,61|44,37|56,86|55,43|44,41|43,13|43,13|42,13|42,13|57,61|64,40|46,48|55,45|52,47|56,43|54,19|53,83|48,40|54,54|53,58|54,83|59,56|52,85|48,13|55,55|50,12|51,40|56,43|49,40|59,33|37,34|58,33|53,34|54,42|56,30|58,54|54,33|56,60|58,60|57,46|43,44|56,40|49,36|49,32|47,42|59,39|56,35|51,39|55,38|57,45|55,42|56,43|56,43|57,13|56,43|56,44|55,42|55,44|55,42|55,43|54,43|54,44|54,43|56,44|55,45|55,43|57,45|56,43|55,44|57,46|56,45|57,53|60,28&sensor=false

This response came from the Server (google). So you're not allowed to request such long URLs.

See the google api doc for more infos:

Static Map URLs are restricted to 2048 characters in size. In practice, you will probably not have need for URLs longer than this, unless you produce complicated maps with a high number of markers and paths.