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 staticfiles %}


{% if route %}  
	
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}css/concert_route.css" type="text/css" media="screen" />{% endaddtoblock %}
{% addtoblock "js" strip %}<script type="text/javascript" src="//maps.google.com/maps/api/js?key={{GOOGLE_MAPS_API_KEY}}&amp;sensor=false&amp;language=de"></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';
		  
		  // 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);
	
		  // 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);
	
		  google.maps.event.addDomListener(controlUI, 'click', function() {
			  $("#map_box").show();
		  });
	}

	 
	 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';

		  // 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);
	
		  // 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);
		  
		  google.maps.event.addDomListener(controlUI, 'click', function() 
		  {
			  {% if not route.event.map_location %}
		        geocoder = new google.maps.Geocoder();
		        geocoder.region = "de";
		        geocoder.geocode( {"address": "{{ route.event.location }}" }, 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 %} 
			  	var loc = new google.maps.LatLng( {{ route.event.map_location }} );
				  map.setMapTypeId(  google.maps.MapTypeId.HYBRID );
				  map.setZoom( 20 );

      		    map.setCenter( loc ); 

			  {% endif %}
		  });
	}

	$(document).ready(function() {
		
	    var m = $("#map")[0];

	    var myOptions = {
	        zoom: 10,
	        mapTypeId: google.maps.MapTypeId.ROAD,
	        zoomControl: false,
	        panControl: false,
	        streetViewControl: false,
	        scrollwheel: false
	    }
	    var directionsService = new google.maps.DirectionsService();
	    var directionsDisplay = new google.maps.DirectionsRenderer();
	    var map               = new google.maps.Map(m, myOptions);
		
	    directionsDisplay.setMap( map );
	    
	    var request = {
	    	origin:      "{{route.origin}}",
	    	destination: "{{route.destination}}",
	    	travelMode: google.maps.DirectionsTravelMode.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 ) ;
	        }
	      });
	    

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

	    var showTargetControlDiv = document.createElement('div');
	    var showTargetControl = new ShowTargetControl(showTargetControlDiv, map);

	    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 %}