Various fixes
This commit is contained in:
@@ -8,146 +8,163 @@ object: {{route.event}} {% endcomment %} {% load sekizai_tags static %}
|
||||
media="screen"
|
||||
/>{% endaddtoblock %} {% addtoblock "js" strip %}
|
||||
<script
|
||||
async
|
||||
type="text/javascript"
|
||||
src="https://maps.googleapis.com/maps/api/js?key={{ GOOGLE_MAPS_API_KEY }}&language=de"
|
||||
src="https://maps.googleapis.com/maps/api/js?key={{ GOOGLE_MAPS_API_KEY }}&language=de&loading=async&callback=initRouteMap"
|
||||
></script>
|
||||
{% endaddtoblock %} {% addtoblock "js" %}
|
||||
<script type="text/javascript">
|
||||
|
||||
function OpenWindowControl(controlDiv, map) {
|
||||
// Set CSS styles for the DIV containing the control
|
||||
// Setting padding to 5 px will offset the control
|
||||
// from the edge of the map
|
||||
controlDiv.style.paddingTop = '6px';
|
||||
function OpenWindowControl(controlDiv, map) {
|
||||
controlDiv.style.paddingTop = '6px';
|
||||
|
||||
// Set CSS for the control border
|
||||
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 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);
|
||||
|
||||
// Set CSS for the control interior
|
||||
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);
|
||||
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);
|
||||
|
||||
google.maps.event.addDomListener(controlUI, 'click', function() {
|
||||
$("#map_box").show();
|
||||
});
|
||||
controlUI.addEventListener('click', function() {
|
||||
$("#map_box").show();
|
||||
});
|
||||
}
|
||||
|
||||
function ToggleTargetControl(controlDiv, map, directionsDisplay, getRouteBounds) {
|
||||
controlDiv.style.paddingTop = '6px';
|
||||
controlDiv.style.paddingRight = '6px';
|
||||
|
||||
function ShowTargetControl(controlDiv, map) {
|
||||
// Set CSS styles for the DIV containing the control
|
||||
// Setting padding to 5 px will offset the control
|
||||
// from the edge of the map
|
||||
controlDiv.style.paddingTop = '6px';
|
||||
controlDiv.style.paddingRight = '6px';
|
||||
var showingLocation = false;
|
||||
{% if not route.event.map_location %}
|
||||
var geocodedLocation = null;
|
||||
{% endif %}
|
||||
|
||||
// Set CSS for the control border
|
||||
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 = 'Zum Zielpunkt springen';
|
||||
controlDiv.appendChild(controlUI);
|
||||
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);
|
||||
|
||||
// Set CSS for the control interior
|
||||
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);
|
||||
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);
|
||||
|
||||
google.maps.event.addDomListener(controlUI, 'click', function()
|
||||
{
|
||||
{% if not route.event.map_location %}
|
||||
var geocoder = new google.maps.Geocoder();
|
||||
geocoder.geocode( {"address": "{{ route.event.location }}", "region": "de" }, function(results, status) {
|
||||
if (status === google.maps.GeocoderStatus.OK) {
|
||||
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
|
||||
map.setZoom(15);
|
||||
map.setCenter(results[0].geometry.location);
|
||||
} else {
|
||||
console.error("Geocoding failed: " + status);
|
||||
}
|
||||
});
|
||||
{% else %}
|
||||
var loc = new google.maps.LatLng({{ route.event.map_location }});
|
||||
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
|
||||
map.setZoom(20);
|
||||
map.setCenter(loc);
|
||||
{% endif %}
|
||||
});
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
var m = $("#map")[0];
|
||||
function initRouteMap() {
|
||||
var m = document.getElementById("map");
|
||||
|
||||
var myOptions = {
|
||||
zoom: 10,
|
||||
mapTypeId: google.maps.MapTypeId.ROAD,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
zoomControl: false,
|
||||
panControl: 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();
|
||||
var map = new google.maps.Map(m, myOptions);
|
||||
directionsDisplay.setMap(map);
|
||||
|
||||
directionsDisplay.setMap( map );
|
||||
var routeBounds = null;
|
||||
|
||||
var request = {
|
||||
origin: "{{route.origin}}",
|
||||
destination: "{{route.destination}}",
|
||||
travelMode: google.maps.TravelMode.DRIVING
|
||||
}
|
||||
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 ) ;
|
||||
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');
|
||||
var showInfoControl = new OpenWindowControl(showInfoControlDiv, map);
|
||||
new OpenWindowControl(showInfoControlDiv, map);
|
||||
showInfoControlDiv.index = 1;
|
||||
map.controls[google.maps.ControlPosition.TOP_RIGHT].push( showInfoControlDiv );
|
||||
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(showInfoControlDiv);
|
||||
|
||||
var showTargetControlDiv = document.createElement('div');
|
||||
var showTargetControl = new ShowTargetControl(showTargetControlDiv, map);
|
||||
|
||||
new ToggleTargetControl(showTargetControlDiv, map, directionsDisplay, function() { return routeBounds; });
|
||||
showTargetControlDiv.index = 2;
|
||||
map.controls[ google.maps.ControlPosition.TOP_RIGHT ].push(showTargetControlDiv);
|
||||
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(showTargetControlDiv);
|
||||
|
||||
|
||||
|
||||
$("#map_box a").click( function() {
|
||||
$("#map_box").hide();
|
||||
map.setOptions( { scrollwheel: true } );
|
||||
});
|
||||
}
|
||||
);
|
||||
$("#map_box a").click(function() {
|
||||
$("#map_box").hide();
|
||||
map.setOptions({ scrollwheel: true });
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endaddtoblock %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user