Django3.2 | クラウドソーシングアプリの構築 | 38 | 配達依頼詳細表示 - 学生向けプログラミング入門

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

【37 | Googleマップ表示】 << 【ホーム】 >> 【39 | 配達依頼詳細ページ】

「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);

            // Click event for each job
            marker.addListener("click", () => {
                showJobDetails(job);
            });

        }
      })
}

function showJobDetails(job) {
    $("#job-details").css("display", "block");
    $("#job-name").html(job.name);

    $("#job-photo").attr('src', "/media/" + job.photo);
    $("#pickup-address").html(job.pickup_address);
    $("#delivery-address").html(job.delivery_address);
    $("#duration").html(job.duration);
    $("#distance").html(job.distance);
    $("#price").html(job.price);


  }
</script>

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

    #map {
      flex: 1;
    }

    small {
        font-size: 12px;
        line-height: 1.2rem;
    }

    .card {
        border: none;
    }

    #job-details {
        display: none;
    }    

  </style>

{% endblock %}

{% block content %}

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

    <div id="job-details" class="card">
        <div class="card-body p-2">
          <div class="media">
            <img id="job-photo" class="rounded-lg mr-3" width="50px" height="50px">
            <div class="media-body">
              <b id="job-name"></b>
              <div class="d-flex">
                <div class="flex-grow-1 mr-2">
    
                  <small class="text-success">
                    <i class="fas fa-car"></i> <span id="distance"></span> km
                    <i class="far fa-clock ml-2"></i> <span id="duration"></span> 分
                  </small>
    
                  <div class="d-flex align-items-center mt-2">
                    <i class="fas fa-map-marker-alt"></i>
                    <small id="pickup-address" class="text-secondary ml-2"></small>
                  </div>
    
                  <div class="d-flex align-items-center mt-2">
                    <i class="fas fa-flag-checkered"></i>
                    <small id="delivery-address" class="text-secondary ml-2"></small>
                  </div>
    
                </div>
                <h3 id="price"></h3>円
    
              </div>
            </div>
          </div>
        </div>
    </div>    
</div>



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

{% endblock %}

ブラウザを確認します。
マーカーをクリックすると仕事の詳細がでるようになりました。
http://127.0.0.1:8000/courier/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);

        // Create a new viewpoint bound
        var bounds = new google.maps.LatLngBounds();

        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,
            });

            // Increase the bounds to take this point
            bounds.extend(position);

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

            // Click event for each job
            marker.addListener("click", () => {
                showJobDetails(job);
            });

            // Fit these bounds to the map
            map.fitBounds(bounds);

        }
      })
}

function showJobDetails(job) {
    $("#job-details").css("display", "block");
    $("#job-name").html(job.name);

    $("#job-photo").attr('src', "/media/" + job.photo);
    $("#pickup-address").html(job.pickup_address);
    $("#delivery-address").html(job.delivery_address);
    $("#duration").html(job.duration);
    $("#distance").html(job.distance);
    $("#price").html(job.price);


  }
</script>

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

    #map {
      flex: 1;
    }

    small {
        font-size: 12px;
        line-height: 1.2rem;
    }

    .card {
        border: none;
    }

    #job-details {
        display: none;
    }    

  </style>

{% endblock %}

{% block content %}

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

    <div id="job-details" class="card">
        <div class="card-body p-2">
          <div class="media">
            <img id="job-photo" class="rounded-lg mr-3" width="50px" height="50px">
            <div class="media-body">
              <b id="job-name"></b>
              <div class="d-flex">
                <div class="flex-grow-1 mr-2">
    
                  <small class="text-success">
                    <i class="fas fa-car"></i> <span id="distance"></span> km
                    <i class="far fa-clock ml-2"></i> <span id="duration"></span> 分
                  </small>
    
                  <div class="d-flex align-items-center mt-2">
                    <i class="fas fa-map-marker-alt"></i>
                    <small id="pickup-address" class="text-secondary ml-2"></small>
                  </div>
    
                  <div class="d-flex align-items-center mt-2">
                    <i class="fas fa-flag-checkered"></i>
                    <small id="delivery-address" class="text-secondary ml-2"></small>
                  </div>
    
                </div>
                <h3 id="price"></h3>円
    
              </div>
            </div>
          </div>
        </div>
    </div>    
</div>



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

{% endblock %}