I posted an answer in response to this question on StackOverflow, ‘How can I know the actual scale that my Google maps is currently in?‘. Which perhaps didn’t exactly answer Joaquín M‘s problem, but I thought was useful enough anyway to warrant its own blog post, in my infrequent Google Map API series. In his question he stated “The information I need is the actual width in kilometers of my map“, which my answer does do.
What we want to do is have an event listener for whenever the size of the map changes, using the
bounds_changed event. This way we get the updated size if the user resizes the window or adjusts the zoom. And in fact this also happens when the map first appears. If we try and use
map.getBounds() within our initialize function, we run the risk of calling it too soon before the map has fully rendered, so we need that event listener.
We can find out the map’s size from its bounds, which represent a rectangular box of what’s currently visible. But from the bounds object, we can only find out the coordinates for its north-east and south-west corners. So we’ve still got a bit of work to do to turn this into a distance.
We’ll need to use the geometry library to turn degrees into metres. So we specify
libraries=geometry in the Google Maps API URL.
Let’s assume we have a map with its north-east coordinates as (lat1, lng1) and its south-west coordinates as (lat2, lng2), e.g.:
Sidenote: confusingly whenever I look at coordinates I always think of Cartesian coordinates, e.g. (x, y), where the first value x represents the horizontal value, and the second value y represents the vertical value. However when dealing with LatLng objects in Google Maps it’s always latitude first (degrees north/south from the equator), then longitude second (degrees east/west from the Greenwich meridian). So that’s how I’ll be referring to them here.
I’m assuming we want to calculate both the width and height of the bounds, not just its area or the diagonal distance between the two corners. So what we really need to do is work out the vertical distance from lat1 to lat2, and then the horizontal distance from lng1 to lng2. To do this we have to construct LatLng objects representing the points (lat1, lng1) and (lat2, lng1) [fig 1] for the vertical distance. And again (lat1, lng1) and (lat1, lng2) [fig 2] for the horizontal. Or equally we could have done (lat1, lng2) – (lat2, lng2), and then (lat2, lng1) – (lat2, lng2).
I could have simply put all the below into the initialize function. However certain parts of it made sense to put into their own functions, as they could then easily be re-used, e.g. for any time we might want the distance between any two points on the map, or for calculating the distance of any rectangular area on the map.