Django markers using geoposition

Question

I use django-geoposition to manage my geodata. in my home.html:

<!-- Add Google Maps -->
<script>
function myMap() {
  {% for posts in post_list %}
  myCenter=new google.maps.LatLng(34.8402781,135.592376);
  var myLocation=new google.maps.LatLng({{posts.position.latitude}},{{posts.position.longitude}});
  var mapOptions= {
    center:myCenter,
    zoom:7, scrollwheel: true, draggable: true,
    mapTypeId:google.maps.MapTypeId.HYBRID
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
  var marker = new google.maps.Marker({
    position: myLocation,
    title:'{{ posts.title }}',
    draggable: false,

  });
  marker.setMap(map);

  {%endfor%}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCB1CA2DoITfJoFY4HWTLTxH4Avx7QWWqA&callback=myMap"></script>

But it just shows the fist post's maker on the map. I guess the for loop doesn't work. I don't know what to do. I would appreciate any help!

models.py

from django.db import models
from geoposition.fields import GeopositionField

class Post(models.Model):
    title = models.CharField(max_length=100)
    introduction = models.TextField(blank=True)
    reason = models.TextField(blank=True)
    transportation = models.TextField(blank=True)
    basic_info = models.TextField(blank=True)
    photo = models.URLField(blank=True)
    location = models.CharField(max_length=100)
    created_at = models.DateTimeField(auto_now_add=True)
    position = GeopositionField(blank=True)
    website = models.URLField(blank=True)
    useful_link = models.URLField(blank=True)

def __str__(self):
 return self.title

views.py:

from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from .models import Post

def home(request):
    posts = Post.objects.all()
    paginator = Paginator(posts, 6) #每页显示十个
    page = request.GET.get('page')
    try :
        post_list = paginator.page(page)
    except PageNotAnInteger :
        post_list = paginator.page(1)
    except EmptyPage :
        post_list = paginator.paginator(paginator.num_pages)
    return render(request, 'attractions/home.html', {'post_list': post_list,})

def post_detail(request, pk):
    post = Post.objects.get(pk=pk)
    return render(request, 'attractions/post.html', {
    'post': post,
})

attractions\urls.py

from django.conf.urls import url
from . import views
app_name = 'attractions'
urlpatterns = [
    url(r'^$',views.home, name = 'home'),
    url(r'^post/(?P<pk>\d+)/$', views.post_detail, name='post_detail')
]

urls.py:

from django.conf.urls import url,include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^',include('attractions.urls')),
    url(r'^markdown/', include( 'django_markdown.urls')),
]

admin.py:

from django.contrib import admin
from .models import Post
from django_markdown.admin import MarkdownModelAdmin
from django_markdown.widgets import AdminMarkdownWidget
from django.db.models import TextField

class PostAdmin(MarkdownModelAdmin):
    list_display = ('title','position',) #顯示欄
    search_fields = ('title',) #搜索欄
    ordering = ('created_at',) #減號表示降序
    formfield_overrides = {TextField: {'widget': AdminMarkdownWidget}}

admin.site.register(Post,PostAdmin)

score 0 · Answer 1 · answered May 25 '17 at 12:00

0

I see the following errors:
- Javascript: You have to do the loop for the markers not for entire map rendering javascript code.
I suggest you to use Class Based Views (in this case ListView).

answered May 25 '17 at 12:00

paralosreg

141
1
15

Thank you paralosreg. Cause I am new to python and django, I have little idea of Class Based Views. I will try to figure it out later. I tried your method but I did not know if I did the way you suggested. I put the loop like this: {% for posts in post_list %} var myLocation=new google.maps.LatLng({{posts.position.latitude}},{{posts.position.longitude}}); {%endfor%} However, the map still show one location which is the first one in the post_list. Do you have any further advice? – Qiqing Huang May 25 '17 at 15:38
I think your problem is in Javascript. Check this post https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example to multiple markers. You have to generate the "var locations" with the "for". Everything is ok in the view. – paralosreg May 25 '17 at 16:41
following the link, I made changes like this: var marker = []; for (var i = 0; i < 100; i++){ var post = {{post.position}}[i]; var latLng = new google.maps.LatLng(post[i].latitude,post[i].longitude); var marker = new google.maps.Marker(latLng); markers.push(marker); } var markerCluster = new MarkerClusterer(map, markers); But still no marker shown on the map at all. – Qiqing Huang May 26 '17 at 11:34

Django markers using geoposition

1 Answers1