Link on image in PDF using html2pdf library

I'm creating PDF from HTML page using html2pdf Python library. I have used Google Map Static Image API to generate dynamic image in PDF and also anchor tag's href link is generated dynamically.

Below is code in HTML:

<a target="_blank" href="http://maps.google.com/?q={{ direction_data.address }}">
<img class="img-responsive" style="cursor: pointer;" self.location src="https://maps.googleapis.com/maps/api/staticmap?center={{ latlng }}&zoom=16&size=385x510&maptype=roadmap&key=my_API_KEY&markers=color:red%7Clabel:M%7C{{ lat }},{{ lng }}&&q=%7C{{ lat }},{{ lng }}"/>
</a>

Now this code goes to PDF but it is not showing any link on image. How to put link on image in PDF using html2pdf?

Edit 1 Code by Me:

Below is views.py code:

#below view will fetch resources like images
def fetch_resources(uri, rel):
    path = os.path.join(settings.MEDIA_ROOT, uri.replace(settings.MEDIA_URL, ""))
    return path

# main pdf generation code view as below
def render_to_pdf(template_src, context_dict):
    template = get_template(template_src)
    context = Context(context_dict)
    html = template.render(context)
    result = StringIO.StringIO()
    pdf = pisa.pisaDocument(StringIO.StringIO(html.encode("UTF-8")), result ,callback=fetch_resources)
# , file("map_pdf.pdf","wb")
    if not pdf.err:
        return HttpResponse(result.getvalue(), content_type='application/pdf')
    return HttpResponse('We had some errors<pre>%s</pre>' % escape(html))

def google_pdfmap(request,id,id1):
    # here I have done database queries to get all data
    # and then sent them over above view method
    template= "pdf_view_page.html"
    return render_to_pdf(
            template,
            {'pagesize': 'A4 landscape',
            'direction_data':direction_data,
            'contact_data': contact_data,
            'day_data': day_data,
            'latlng' : latlng,
            'lat': lat,
            'lng' : lng,
            })

=========Below pdf_view_page.html page==========

<html>
<head>
        <style type="text/css">
            @page {
                size: {{ pagesize }} !important;
                margin-left : 10px;
                margin-top : 10px;
                margin-bottom : 10px;
                margin-right : 5px;
            }
        </style>
</head>
<body>
    <a target="_blank" href="http://maps.google.com/?q={{ direction_data.address }}">
    <img class="img-responsive" style="cursor: pointer;" self.location src="https://maps.googleapis.com/maps/api/staticmap?center={{ latlng }}&zoom=16&size=385x510&maptype=roadmap&key=my_API_KEY&markers=color:red%7Clabel:M%7C{{ lat }},{{ lng }}&&q=%7C{{ lat }},{{ lng }}"/>
    </a>
</body>
</html>

Solution

It took me sometime but then I come to this solution and it worked for me.

Just put this attributes inside img tag.

style="cursor: pointer" onclick="javascript:self.location='http://maps.google.com/?q={{ direction_data.address }}'"