Google Maps Ground Overlay not caching Django served dynamic image

Question

I've set up a google maps overlay (v 3.10) in javascript to display an image generated on the server:

var overlay = new google.maps.GroundOverlay(url, MAP_BOUNDS, {map: gmap});

When url points to a static url, the overlay works fine. However, when it points to a Django (v 1.4) dynamic url, the image dispalys correctly but it keeps making a server request to url as the map is scrolled. For instance:

url = 'localhost:8000/abcdef/maps/getMap'

In Django urls.py:

url(r'^(?P<key>\S+)/maps/getMap/$', 'maps.views.getMap'),

The url redirects to this code:

@csrf_exempt
def getMap(request, key):

    response = HttpResponse(mimetype="image/png")

    im=Image.open('media/maps' + id + '/map.png')
    im.save(response, 'PNG')

    return response

So, seems to me there is some difference in the way google maps/the browser is treating the image for the purposes of caching, perhaps related to something in the HTTP header. How can I make it so it doesn't keep making server requests once the image is retrieved?

From inspecting the response headers in the browser console, it seems that the static image has 'Content-Length' and 'Last-Modified' fields the dynamic image doesn't. Unsure if that's relevant.

Grateful for any help.

Answer 1

Turns out the solution is relatively simple:

response = HttpResponse(image_data, mimetype="image/png")
response['Cache-Control'] = 'max-age=86400'
return response