martin/blechreiz-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Map on mainpage

Browse Source
This commit is contained in:
Martin Bauer
2013-09-22 17:53:18 +02:00
parent 230f1e6a36
commit 3fa4bdaafd
6 changed files with 132 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
website/templates/website/mainpage.html
View File

@@ -41,6 +41,7 @@
}
</style>
{% endaddtoblock %}
@@ -74,6 +75,7 @@
{% addtoblock "css" strip %}<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/lib/animate.css" media="screen, projection">{% endaddtoblock %}
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/coming-soon.css" type="text/css" media="screen" />{% endaddtoblock %}
{% addtoblock "css" strip %}<link rel="stylesheet" href="{{STATIC_URL}}/css/contact.css" type="text/css" media="screen" />{% endaddtoblock %}
{% if event %}
@@ -159,5 +161,103 @@
</div>
{% endif %}
{% addtoblock "js" %}
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&amp;language=de"></script>
<script type="text/javascript" src="{{STATIC_URL}}/js/jquery-ui-1.10.0.custom.min.js" ></script>
{% if hasNextConcertInfo %}
<script type="text/javascript">
// Kartenparameter beim Laden der Seite festlegen
$(document).ready(function() {
// Das Element für die Anzeige suchen
var m = $("#map")[0];
// Mittelpunkt der Karte
var myLatlng = new google.maps.LatLng(49.340174,10.890595);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROAD,
}
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: "{{routeInfo.origin}}",
destination: "{{routeInfo.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 ) ;
}
});
$("#map_box a").click( function() {
$("#map_box").hide();
});
}
);
</script>
{% endif %}
{% endaddtoblock %}
{% addtoblock "css" %}
<style>
#map {
width: 100%;
height: 480px;
}
#map_box a {
margin-top: 30px;
}
</style>
{% endaddtoblock %}
{% if hasNextConcertInfo %}
<div id="contact">
<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">
<h6>Fahrt zum Konzert:</h6>
</div>
Nächstes Konzert ist in {{nextConcert.location}} am {{nextConcert.date}} um {{nextConcert.time | time:"H:i" }} <br/>
{% if nextConcert.meeting_time %} Treffpunkt ist um {{ nextConcert.meeting_time | time:"H:i" }} <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>
<a class="btn" >Schliessen</a>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endblock %}