How to add Google Map Markers With Django Template Tags

1,523 views
Skip to first unread message

DF

unread,
May 31, 2012, 12:32:26 PM5/31/12
to django...@googlegroups.com
I'm trying to place markers based on the latitude and longitude stored in a model on a Google Map using the API and HTML5 geolocation.

The issue is how to loop through the lat/lon info for each object stored in the database within JavaScript tags using template keywords, which I'm not sure can be done in Django.

I found a similar question which I mildly modified and placed within a template – not a separate script file – but it doesn't seem to work:

    function loadMarkers(){
            {% for story in stories %}
            var point = new google.maps.LatLng({{story.latitude}},{{story.longitude}});
                var marker = new google.maps.Marker({
                position: point,
                map: map
            });
            {% endfor %}    
        }

Any insight on how to properly loop through items in a stored Django object with lat, lon info and place these on a Google Map using the API would be very appreciated.

DF

unread,
May 31, 2012, 4:21:21 PM5/31/12
to django...@googlegroups.com
That's interesting, but mine seems like it could be less involved. This is what I attempted, which failed:

Daniele Procida

unread,
May 31, 2012, 4:54:24 PM5/31/12
to django...@googlegroups.com
On 31 May 2012, at 21:21, DF wrote:

That's interesting, but mine seems like it could be less involved. This is what I attempted, which failed:

http://dpaste.org/55T9x/

Well, you don't need all the other stuff I discussed, but the key thing is: given some variable (in my example it was place.site.maps) containing a collection of places with lat/long information, you may be able to use my template to do what you need with a little tweaking.

Daniele

Daniele Procida

unread,
May 31, 2012, 12:50:50 PM5/31/12
to django...@googlegroups.com
On Thu, May 31, 2012, DF <donfer...@gmail.com> wrote:

>Any insight on how to properly loop through items in a stored Django object
>with lat, lon info and place these on a Google Map using the API would be
>very appreciated.

I do it like this:

<https://github.com/evildmp/Arkestra/blob/master/contacts_and_people/templates/contacts_and_people/place_map.html>

The view for that template is:

<https://github.com/evildmp/Arkestra/blob/master/contacts_and_people/views.py#L234>

It provides the template with the place; the place ("Building" in the models, before I realised I needed to be concerned with places that were not actual buildings) will belong to a Site. Each Site can have one or more Buildings (i.e. places), each of which might have a map.

The Site.maps property in:

<https://github.com/evildmp/Arkestra/blob/master/contacts_and_people/models.py#L36>

contains a list of Buildings that should have a map for each Site.

The template loops over all those buildings to produce the map, right here:

<https://github.com/evildmp/Arkestra/blob/master/contacts_and_people/templates/contacts_and_people/place_map.html#L45>

Results look for example like:

<http://www.aikidocardiff.com/place/talybont-sports-centre/map/>

or

<http://medicine.cf.ac.uk/place/heath-park-henry-wellcome-building/map/>.

However many items are on the map, it will scale to fit them in its bounds.

Let me know here or on irc://irc.freenode.net/arkestra if you need more information.

Daniele

Reply all
Reply to author
Forward
0 new messages