freight/app/front/templates/front/storeMap.html

{% extends "front/storeFront.html" %}
{% load mptt_tags %}
{% load static %}
{% load crispy_forms_tags %}

{% block content %}
<h1>{{ storeFront.fullName }}</h1>
<div class='row'>
    <div class='col-md-9'>
        <p>
        {{ storeFront.description }}
        </p>
        <form method='post' enctype="multipart/form-data" >
            {% csrf_token %}
            <div class="card w-100">
                 <div class="card-header">Contact Us</div>
                <div class="card-body">
            <div class="row">
            <div class="col-md-6">{{ form.subject | as_crispy_field }}</div>
            <div class="col-md-6">{{ form.email | as_crispy_field }}</div>
            <div class="col-md-6">{{ form.tel | as_crispy_field }}</div>
            <div class="col-md-6">{{ form.lineId | as_crispy_field }}</div>
            <div class="col-md-12">{{ form.body | as_crispy_field }}</div>
            <div class="col-md-12">{{ form.messageFile | as_crispy_field }}</div>
            </div>
            <input type='submit' value='Save' class='btn btn-primary btn-block'>
                </div>
            </div>
        </form>
        <hr>
        <div id='map'>
        </div>
    </div>
    <div class='col-md-3'>
        <dl>
            <dt>Address</dt>
            <dd>
        {{ storeFront.addressText }}
            </dd>
            <dt>Tel</dt>
            <dd>
                <a href="callto:{{ storeFront.tel_number }}">
                    {{ storeFront.tel_number}}
                </a>
            </dd>
            <dt>Fax</dt>
            <dd>
                <a href="callto:{{ storeFront.fax_number }}">
                    {{ storeFront.fax_number }}</a>
            </dd>
            <dt>LineID</dt>
            <dd>
                <a href="https://line.me/R/{{ storeFront.lineId }}">
                    {{ storeFront.lineId }}</a>
            </dd>
            <dt>Email</dt>
            <dd>
                <a href="mailto:{{ storeFront.email }}">
                    {{ storeFront.email }}</a>
            </dd>
        </dl>
    </div>
</div>
{% endblock %}

{% block header_script %}
<style type='text/css'>
#map {
  height: 600px;
}

</style>
{% endblock %}

{% block foot_script %}
    <script type='text/javascript'>
        let map;

        function initMap() {
                let latLng = {lat: {{ geo.lat }}, lng: {{ geo.lon }} }; 
                map = new google.maps.Map(document.getElementById("map"), {
                    center: latLng,
                    zoom: 8,
                });
                new google.maps.Marker({
                        position: latLng,
                        map,
                        title: "{{ storeFront.fullName }}",
                });
        }
                //initMap();
        window.initMap = initMap;

    </script>
{% endblock %}