Serializing link to Django object with json in Google Map infowindow

Question

I'm serializing data from my Django model into json and placing that info in an infowindow in a Google Map. It works fine thus far. But I'd like to also include a link to each actual object so that a user could click a url that takes them to the full report. I'm not sure how to accomplish this using json as I'm still getting a handle on it.

Essentially using json to provide a link in the Google Map infowindow to the actual object, which in this case is a 'Story" model. I want a link to the actual story to appear in the Google Map info window.

This is my view:

def all_stories(request):
    if not request.user.is_authenticated():
        return redirect("django.contrib.auth.views.login")
    all_stories = Story.objects.select_related().order_by('-date')
    storyJson = []
    for story in all_stories:
        storyJson.append({
            "latitude": story.latitude,
            "longitude": story.longitude,
                "headline": story.title,
                "copy": story.copy,
                'author': story.author.username,
                'topic': story.topic
        })
    return render_to_response("report/storyline.html",
                                {'stories': all_stories,
                                "story_Json":json.dumps(storyJson)},
                                context_instance=RequestContext(request))

This is the portion of the template relating to displaying the current information:

    function loadMarkers(stories){
    for (i=0;i<stories.length;i++) {
        var story = stories[i];

        (function(story) {
            var pinColor = "69f2ff";
                var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=S|" + pinColor,
                    new google.maps.Size(21, 34),
                    new google.maps.Point(0,0),
                    new google.maps.Point(10, 34));
          var point = new google.maps.LatLng(story.latitude, story.longitude);
          var marker = new google.maps.Marker({position: point, map: map, icon: pinImage});
          var infowindow = new google.maps.InfoWindow({
            content: '<div >'+
                '<div >'+
                '</div>'+
                '<h2 class="firstHeading">'+story.headline+'</h2>'+
                '<div>'+
                '<p>'+story.author+'</p>'+
                '<p>'+story.topic+'</p>'+
                '<p>'+story.copy+'</p>'+

                '</div>'+
                '</div>'

          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,this);
          });
        })(story);
    }
}

Any insight on how to accomplish this would be much appreciated.

Answer 1

Part of the answer involves something you haven't yet posted, so I will make the assumption and you can extrapolate.

All you really need to do is use a reverse() value for each story and include them in your json values. The reverse needs to point at the url that you point at the view for a single story. Lets assume your single story view looks like this:

url(r'^story/(\d+)/$', 'story.views.story_details', name="story-details")

Now as you build dict values for each story, include a reversed url:

from django.core.urlresolvers import reverse

host_url = "http://%s" % request.META['HTTP_HOST']

for story in all_stories:
    full_url = '%s%s' % (host_url, reverse('story-details', args=(story.id,)))
    storyJson.append({
        "latitude": story.latitude,
        "longitude": story.longitude,
            "headline": story.title,
            "copy": story.copy,
            'author': story.author.username,
        'topic': story.topic,
        'url': full_url
    })

This part is just an assumption, but I think your "info window" format might look like this:

content: '<div >'+
...
'<a href="'+story.url+'">View Story</a>'+
'</div>'+