在Ajax成功使用Django之后创建一个新的Google Maps

Question

I have made a Google Maps with dive location in the Netherlands. The next step is that an user can search on the page for a dive location and that the search results are showing on the Google Maps. So it must replace the exisitng map.

I'm a new to Django and never worked with Javascript before. The problem is that I don't know how to make a new map with dive locations that are getting back from the search result.

Urls.py

from django.conf.urls import url
from . import views

app_name = 'kaart'

urlpatterns = [
    # /gis
    url(r'^$', views.index, name='index'),

    # Voor ajax zoekfunctie
    url(r'^search/$', views.search_duik_locaties, name='search_duik_locaties'),

    # /gis/id_number/
    url(r'^(?P<duik_id>[0-9]+)/$', views.detail, name='detail'),

]

views.py

from django.shortcuts import render, get_object_or_404
from .models import Duikplaats


def index(request):
    all_duik_locaties = Duikplaats.objects.all()
    longitude = Duikplaats.objects.values('longitude')
    latitude = Duikplaats.objects.values('latitude')


    content = {
        'all_duik_locaties': all_duik_locaties,
        'longitude': longitude,
        'latitude': latitude,
    }
    return render(request, 'kaart/index.html', content)


def detail(request, duik_id):
    duikplaats = get_object_or_404(Duikplaats, pk=duik_id)
    return render(request, 'kaart/details.html', {'duikplaats': duikplaats})


def search_duik_locaties(request):
    query = request.GET.get('q')

    if query is not None and query != '' and request.is_ajax():
        zoek_duik_locaties = Duikplaats.objects.filter(duik_locatie__icontains=query)
        lat = zoek_duik_locaties.values('latitude')

        con = {
            'zoek_duik_locaties': zoek_duik_locaties,
            'lat': lat
        }

        return render(request, 'kaart/ajax_search.html', con)
    return render(request, 'kaart/ajax_search.html')

index.html (part of the Ajxax Call)

    $('#search').keyup(function (event) {
      var query =($('#search').val());


          if (query != '' || query != ' ') {
            $.ajax({
               type: 'GET',
               url: '/gis/search',
               data: {
                 'csrfmiddlewaretoken': '{{ csrf_token }}',
                 'q': query
               },
{#                dataType: 'json',#}
               success: function(data) {
                  $('#search-results').html(data);
                  for (var i=0; i <markers.length; i++) {
                      markers[i].setMap(null);

                  }
                  markers = [];


               },
               error: function(data) {
                  console.log(data);
               }
             });
          }
        });

ajax_search.html

<ul id="results">
    {% for locatie in zoek_duik_locaties %}
        <li><a href="/gis/{{ locatie.id }}">{{ locatie.duik_locatie }}</a> </li>
        <p>{{ lat }}</p>
    {% endfor %}


</ul>

I want that the map will update with the new markers. So that an user can see on the map where the dive location is where he searched for.

I got now a list of the dive location when the user search and the existing markers are gone but I don't get it done that the markers will update.

Answer 1

I ran into the same problem, please let me share you the code for adding a marker via AJAX.

The following code updates via AJAX markers of interest depending of the user current location.

var map = new google.maps.Map(document.getElementById('map'),
var pos = {lat: position.coords.latitude,lng: position.coords.longitude};    
function updatePosition()
    $.ajax({
    url: '/ajax/geo/',
    type: 'POST',
    data: {
      'csrfmiddlewaretoken': '{{ csrf_token }}',
      'pos': pos
    },
    dataType: 'json',
    success: function (outcome) {
        var locations = outcome;
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                icon : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                position: new google.maps.LatLng(locations[i].Latitud, locations[i].Longitud),
                map: map
            });

The views of ajax/geo looks the following:

def ajaxGeo(request):
  data = request.POST
  lati = data.get('pos[lat]','')
  longi = data.get('pos[lng]','')
  # EDIT: Only for prototyping
  model = Locacion.objects.filter(Latitud__lte=float(lati)+0.001)
  model = model.filter(Latitud__gte=float(lati)-0.001)
  model = model.filter(Longitud__lte=float(longi)+0.001)
  model = model.filter(Longitud__gte=float(longi)-0.001)
  outcome =[]
  for m in model:
    outcome.append(model_to_dict(m))
  return JsonResponse(outcome, safe=False)

For what I am seeing from your code you are entirely missing your view from where the AJAX get its response. And you will need as well to modify your function to add markers.

Note: If you want an entirely new map for prototyping I would best be suited to reload the web page, only afterwards optimize your API quota usage and UX.