Django3.2 | クラウドソーシングアプリの構築 | 37 | Googleマップ表示 - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

【36 | 配達人ページ】 << 【ホーム】 >> 【38 | 配達依頼詳細表示】

「core/courier/views.py」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/courier/views.py】

from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.urls import reverse
from django.conf import settings

@login_required(login_url="/sign-in/?next=/courier/")
def home(request):
    return redirect(reverse('courier:available_jobs'))

@login_required(login_url="/sign-in/?next=/courier/")
def available_jobs_page(request):
    return render(request, 'courier/available_jobs.html', {
        "GOOGLE_MAP_API_KEY": settings.GOOGLE_MAP_API_KEY
    })

「core/templates/courier/available_jobs.html」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/templates/courier/available_jobs.html】

{% extends 'courier/base.html' %}

{% block head %}
<script
  src="https://maps.googleapis.com/maps/api/js?key={{ GOOGLE_MAP_API_KEY }}&callback=initMap&libraries=places&v=weekly"
  defer></script>

<script>
  function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 43.062087, lng: 141.354404 },
  });

  directionsRenderer.setMap(map);

  calculateAndDisplayRoute(map, directionsService, directionsRenderer);

}
</script>

<style>

    #map {
      flex: 1;
    }
  
  </style>

{% endblock %}

{% block content %}

<div class="d-flex flex-column h-100" style="padding-bottom: 60px">
    <div id="map"></div>  
</div>

{% include 'courier/bottom_tabs.html' %}

{% endblock %}

「core/templates/courier/base.html」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/templates/courier/base.html】

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>配達人 | クラウドソーシングアプリ</title>
        {% load bootstrap4 %}
        {% bootstrap_css %}
        {% bootstrap_javascript jquery='full' %}

        <script>
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
        </script>

        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">

        <style>
            #content {
              height: calc(var(--vh, 1vh) * 100);
            }
        </style>

        {% block head %}{% endblock %}
    </head>
    <body>
        <div id="content">
            {% block content %}{% endblock %}
        </div>        
          
    </body>
</html>

ブラウザを確認します。
マップを表示できるようになりました。
http://127.0.0.1:8000/courier/jobs/available/

Googleマップの表示を更新していきます。

「crowdsource/urls.py」ファイルを編集します。

記述編集　【Desktop/crowdsource/crowdsource/urls.py】

from django.contrib import admin
from django.urls import path, include
from django.contrib.auth import views as auth_views
from django.conf import settings
from django.conf.urls.static import static

from core import views

from core.customer import views as customer_views
from core.courier import views as courier_views, apis as courier_apis

customer_urlpatters = [
    path('', customer_views.home, name="home"),
    path('profile/', customer_views.profile_page, name="profile"),
    path('payment_method/', customer_views.payment_method_page, name="payment_method"),
    path('create_job/', customer_views.create_job_page, name="create_job"),

    path('jobs/current/', customer_views.current_jobs_page, name="current_jobs"),
    path('jobs/archived/', customer_views.archived_jobs_page, name="archived_jobs"),
    path('jobs/<job_id>/', customer_views.job_page, name="job"),
]

courier_urlpatters = [
    path('', courier_views.home, name="home"),
    path('jobs/available/', courier_views.available_jobs_page, name="available_jobs"),

    path('api/jobs/available/', courier_apis.available_jobs_api, name="available_jobs_api"),
]


urlpatterns = [
    path('admin/', admin.site.urls),
    path('oauth/', include('social_django.urls', namespace='social')),
    path('', views.home),

    path('sign-in/', auth_views.LoginView.as_view(template_name="sign_in.html")),
    path('sign-out/', auth_views.LogoutView.as_view(next_page="/")),
    path('sign-up/', views.sign_up),

    path('customer/', include((customer_urlpatters, 'customer'))),
    path('courier/', include((courier_urlpatters, 'courier'))),

]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

「core/courier」フォルダに「apis.py」ファイルを新規作成します。

新規作成　【Desktop/crowdsource/core/courier/apis.py】

from django.http import JsonResponse
from django.contrib.auth.decorators import login_required
from django.views.decorators.csrf import csrf_exempt

from core.models import *

@csrf_exempt
@login_required(login_url="/courier/sign-in/")
def available_jobs_api(request):
  jobs = list(Job.objects.filter(status=Job.PROCESSING_STATUS).values())

  return JsonResponse({
    "success": True,
    "jobs": jobs
  })

ブラウザでJsonの内容を確認してみます。
http://127.0.0.1:8000/courier/api/jobs/available/

「core/templates/courier/available_jobs.html」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/templates/courier/available_jobs.html】

{% extends 'courier/base.html' %}

{% block head %}
<script
  src="https://maps.googleapis.com/maps/api/js?key={{ GOOGLE_MAP_API_KEY }}&callback=initMap&libraries=places&v=weekly"
  defer></script>

<script>
  function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: { lat: 43.062087, lng: 141.354404 },
    });

    // Get available jobs via API
    fetch("{% url 'courier:available_jobs_api' %}")
      .then(response => response.json())
      .then(json => {
        // console.log(json);


        for (let i = 0; i < json.jobs.length; i++) {
          const job = json.jobs[i];
          const position = { lat: job.pickup_lat, lng: job.pickup_lng };
          const marker = new google.maps.Marker({
            position,
            map,
          });

          new google.maps.InfoWindow({
            content: "<small><b>" + job.name + "</b></small><br/><small>" + job.distance + " Km</small>"
          }).open(map, marker);

        }
      })
}
</script>

<style>
    .gm-ui-hover-effect {
        display: none !important;
    }    

    #map {
      flex: 1;
    }
  
  </style>

{% endblock %}

{% block content %}

<div class="d-flex flex-column h-100" style="padding-bottom: 60px">
    <div id="map"></div>  
</div>

{% include 'courier/bottom_tabs.html' %}

{% endblock %}