blechreiz-website/eventplanner/templates/eventplanner/routeToEventMap.inc.html

{% comment %} Displays google map with directions to next conert Context:
Coordinates or textual adresses: {{route.origin}} {{route.destination}} Event
object: {{route.event}} {% endcomment %} {% load sekizai_tags static %}
{% if route %} {% addtoblock "css" strip %}<link
    rel="stylesheet"
    href="{% static 'css/concert_route.css' %}"
    type="text/css"
    media="screen"
/>{% endaddtoblock %} {% addtoblock "js" strip %}
<script
    async
    type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key={{ GOOGLE_MAPS_API_KEY }}&amp;language=de&amp;loading=async&amp;callback=initRouteMap"
></script>
{% endaddtoblock %} {% addtoblock "js" %}
<script type="text/javascript">

    function OpenWindowControl(controlDiv, map) {
        controlDiv.style.paddingTop = '6px';

        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = 'white';
        controlUI.style.borderStyle = 'solid';
        controlUI.style.borderWidth = '1px';
        controlUI.style.cursor = 'pointer';
        controlUI.style.textAlign = 'center';
        controlUI.title = 'Fenster mit Konzert Info anzeigen';
        controlDiv.appendChild(controlUI);

        var controlText = document.createElement('div');
        controlText.style.fontFamily = 'Arial,sans-serif';
        controlText.style.fontSize = '12px';
        controlText.style.paddingLeft = '4px';
        controlText.style.paddingRight = '4px';
        controlText.innerHTML = 'Konzert Info anzeigen';
        controlUI.appendChild(controlText);

        controlUI.addEventListener('click', function() {
            $("#map_box").show();
        });
    }

    function ToggleTargetControl(controlDiv, map, directionsDisplay, getRouteBounds) {
        controlDiv.style.paddingTop = '6px';
        controlDiv.style.paddingRight = '6px';

        var showingLocation = false;
        {% if not route.event.map_location %}
        var geocodedLocation = null;
        {% endif %}

        var controlUI = document.createElement('div');
        controlUI.style.backgroundColor = 'white';
        controlUI.style.borderStyle = 'solid';
        controlUI.style.borderWidth = '1px';
        controlUI.style.cursor = 'pointer';
        controlUI.style.textAlign = 'center';
        controlUI.title = 'Zwischen Route und Konzertort wechseln';
        controlDiv.appendChild(controlUI);

        var controlText = document.createElement('div');
        controlText.style.fontFamily = 'Arial,sans-serif';
        controlText.style.fontSize = '12px';
        controlText.style.paddingLeft = '4px';
        controlText.style.paddingRight = '4px';
        controlText.innerHTML = 'Konzertort anzeigen';
        controlUI.appendChild(controlText);

        function goToLocation() {
            {% if not route.event.map_location %}
            if (geocodedLocation) {
                map.setMapTypeId(google.maps.MapTypeId.HYBRID);
                map.setZoom(15);
                map.setCenter(geocodedLocation);
            } else {
                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({"address": "{{ route.event.location }}", "region": "de"}, function(results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        geocodedLocation = results[0].geometry.location;
                        map.setMapTypeId(google.maps.MapTypeId.HYBRID);
                        map.setZoom(15);
                        map.setCenter(geocodedLocation);
                    } else {
                        console.error("Geocoding failed: " + status);
                        // revert toggle state on failure
                        showingLocation = false;
                        controlText.innerHTML = 'Konzertort anzeigen';
                        directionsDisplay.setMap(map);
                    }
                });
            }
            {% else %}
            var loc = new google.maps.LatLng({{ route.event.map_location }});
            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
            map.setZoom(20);
            map.setCenter(loc);
            {% endif %}
        }

        controlUI.addEventListener('click', function() {
            if (!showingLocation) {
                showingLocation = true;
                controlText.innerHTML = 'Route anzeigen';
                directionsDisplay.setMap(null);
                goToLocation();
            } else {
                showingLocation = false;
                controlText.innerHTML = 'Konzertort anzeigen';
                directionsDisplay.setMap(map);
                map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
                var bounds = getRouteBounds();
                if (bounds) {
                    map.fitBounds(bounds);
                }
            }
        });
    }

    function initRouteMap() {
        var m = document.getElementById("map");

        var myOptions = {
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControl: false,
            streetViewControl: false,
            scrollwheel: false
        };
        var map = new google.maps.Map(m, myOptions);

        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(map);

        var routeBounds = null;

        var request = {
            origin:      "{{route.origin}}",
            destination: "{{route.destination}}",
            travelMode: google.maps.TravelMode.DRIVING
        };

        directionsService.route(request, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                var leg = response.routes[0].legs[0];
                $("#route_duration").html(leg.duration.text);
                $("#route_distance").html(leg.distance.text);
                routeBounds = response.routes[0].bounds;
            }
        });

        var showInfoControlDiv = document.createElement('div');
        new OpenWindowControl(showInfoControlDiv, map);
        showInfoControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(showInfoControlDiv);

        var showTargetControlDiv = document.createElement('div');
        new ToggleTargetControl(showTargetControlDiv, map, directionsDisplay, function() { return routeBounds; });
        showTargetControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(showTargetControlDiv);

        $("#map_box a").click(function() {
            $("#map_box").hide();
            map.setOptions({ scrollwheel: true });
        });
    }
</script>
{% endaddtoblock %}

<div id="concert_route">
    <div id="map"></div>
    <div id="map_box" class="row map">
        <div class="container">
            <div id="route_info_box" class="span5 box_wrapp">
                <div class="box_cont">
                    <div class="head">
                        <h4>Nächstes Konzert</h4>

                        <!--
                    </div>
                    Nächstes Konzert ist in <br> <em>{{route.event.location}}</em> <br> am {{route.event.date | date:"SHORT_DATE_FORMAT" }} um {{route.event.time | time:"H:i" }} Uhr <br/>
          		                    {% if route.event.meeting_time %} Treffpunkt ist um {{ route.event.meeting_time | time:"H:i" }} Uhr <br/> {% endif %}

                    <table>
					<tr> <td> Fahrzeit:</td> <td> <span id="route_duration"></span> </td> </tr>
					<tr> <td> Strecke: </td> <td> <span id="route_distance"></span> </td> </tr>
					</table>
					-->
                        <table class="table table-striped table-condensed">
                            <tr>
                                <td>Ort:</td>
                                <td>{{route.event.location}}</td>
                            </tr>
                            <tr>
                                <td>Datum:</td>
                                <td>{{route.event.date | date:"D, d.m.y" }}</td>
                            </tr>
                            <tr>
                                <td>Uhrzeit:</td>
                                <td>{{route.event.time | time:"H:i" }} Uhr</td>
                            </tr>
                            {% if route.event.meeting_time %}
                            <tr>
                                <td>Treffen um:</td>
                                <td>
                                    {{route.event.meeting_time | time:"H:i" }}
                                    Uhr
                                </td>
                            </tr>
                            {% endif %}
                            <tr>
                                <td>Fahrzeit:</td>
                                <td><span id="route_duration"></span></td>
                            </tr>
                            <tr>
                                <td>Strecke:</td>
                                <td><span id="route_distance"></span></td>
                            </tr>
                        </table>

                        <a class="btn">Schliessen</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% endif %}
</div>