Ajax and Google maps not working in Django

Question

I am using django-easy-maps to display maps on a my page and i have some links on the sidebar and when the user clicks that link i want to refresh the map with the address in the link.

My django template of donate.html is this

{% block optionalcode %}
<script>
$(document).ready(function() {
$('.link').click(function() {
var n = $(this).attr("name");
n=n.replace(/\s/g,'+');
$('#results').html('&nbsp;').load('/donate/?n=' + n);
});
});
</script>


{% endblock %}

{% block contenttitle %}{% endblock %}

{% block content %}     
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">


<div class="hero-unit" style="padding:10px 10px 10px 10px">

<div id="results">
<b> <pre class="prettyprint
linenums"> {{addr}} </pre> </b>
{% load easy_maps_tags %}
{% easy_map addr 725 400 %}     
</div>

</div>
</div>





{% endblock %} 

{% block sidebar %} 
<div class="span4">
    <div class="hero-unit" style="padding:10px 10px 10px 10px">

        <div class="accordion" id="accordion2">

       <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                  North Delhi
                </a>
              </div>
              <div style="height: 0px;" id="collapseOne" class="accordion-body collapse">
                <div class="accordion-inner">
                  <ol>
                  <li><a class='link' href="#" name="Some name1">Some link1</a> </li>
                  <li><a class='link' href="#" name="Some name2">Some link2</a> </li>




                  </ol>
                </div>
              </div>
            </div>


</div>
{% endblock %}

and my view code is here :

from django.shortcuts import render_to_response
from django.template import RequestContext
from django.http import HttpResponse

def ajax_req(request):
    if request.is_ajax():
        n = request.GET.get('n')
        return render_to_response('donate_res.html', {'addr': n},context_instance=RequestContext(request))


    else :
        return render_to_response('donate.html', {'addr': "Some Address"},context_instance=RequestContext(request))

and donate_res.html is just a small piece that replaces the #results div code.

<b> <pre class="prettyprint linenums"> {{addr}} </pre> </b> 
  {% load easy_maps_tags %} 
  {% easy_map addr 725 400 using "easy_maps/map.html"%}

The problem is when i click the link the data is sent back to the page i know this because i can see the address but the map is not displayed.A quick look at the Web Developer console in firefox gives this error.

A call to document.write() from an asynchronously-loaded external script was ignored. @ http://127.0.0.1:8000/donate/

Please tell me what am i doing wrong or a workaround to remove this error...i am new to Django.

Answer 1

Take a look at this question. It should answer why it is not working.

Also, personally I don't agree with the way you are doing this. It is recreating and reloading the map every time you click on the link, which is not only inefficient but also in the long term you might run into issues being limited by the maximum number of times you can load a map from Google.

I would recommend you to create your write your own javascript to load the map and the address or take a look at the code that django-easy-maps generates and see if rather than recreating the container and redownloading the map javascript you can just set the center of the map or the point where the marker should be.

I could help more if you can paste the code that the django-easy-maps generates in {% easy_map addr 725 400 using "easy_maps/map.html"%}