DjNRO

{% block extrajs %}

    <script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.exp&sensor=true&language=en&libraries=places"></script>

<script type="text/javascript">

	var lat = "{{MAP_CENTER.0}}";

	var lat = parseFloat(lat.replace(",","."));

	var lng = "{{MAP_CENTER.1}}";

	var lng = parseFloat(lng.replace(",","."));

	var zoomLevel = 6;

	var latlng = new google.maps.LatLng(lat, lng);

	var map = '';

	var bounds = '';

	var image = '';

	var marker = '';

	var eduMarker = false;

	var infoWindow;

	var getOnce = false;

	var geocoder = null;

	var infoWindow;

	var directionDisplay;

    var directionsService = new google.maps.DirectionsService();

	var styles = [{

		url : '{% static 'img/edugroup.png' %}',

		height : 54,

		width : 63,

		textColor : '#ffffff',

		textSize : 11

	}, {

		url : '{% static 'img/edugroup.png' %}',

		height : 54,

		width : 63,

		textColor : '#ffffff',

		textSize : 11

	}, {

		url : '{% static 'img/edugroup.png' %}',

		height : 54,

		width : 63,

		textColor : '#ffffff',

		textSize : 11

	}];

	function initialize() {

		image = new google.maps.MarkerImage('{% static 'img/edupin.png' %}',

			new google.maps.Size(29, 40),

			new google.maps.Point(0, 0),

			new google.maps.Point(14, 40)

		);

		var styleArray = [{

			featureType : "all",

			stylers : [{

				saturation : -60

			}, {

				gamma : 1.00

			}]

		}, {

			featureType : "poi.business",

			elementType : "labels",

			stylers : [{

				visibility : "off"

			}]

		}, {

			"featureType" : "transit.line",

			"elementType" : "geometry",

			"stylers" : [{

				"visibility" : "off"

			}]

		}, {

			"featureType" : "poi",

			"elementType" : "all",

			"stylers" : [{

				"visibility" : "off"

			}]

		}, {

			'featureType' : "administrative.country",

			'elementType' : "labels",

			'stylers' : [{

				'visibility' : "off"

			}]

		}];

		var mapOptions = {

			center : latlng,

			zoom : zoomLevel,

			mapTypeId : google.maps.MapTypeId.ROADMAP,

			styles : styleArray,

			mapTypeId : google.maps.MapTypeId.ROADMAP,

			mapTypeControlOptions : {

				style : google.maps.MapTypeControlStyle.DEFAULT

			},

			navigationControl : true,

			mapTypeControl : false,

		};

		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

		var input = document.getElementById('searchTextField');

	    var autocomplete = new google.maps.places.Autocomplete(input);

	    autocomplete.bindTo('bounds', map);

		infoWindow = new google.maps.InfoWindow();

		bounds = new google.maps.LatLngBounds();

		directionsDisplay = new google.maps.DirectionsRenderer();

		geocoder = new google.maps.Geocoder();

		directionsDisplay.setMap(map);

		if (getOnce == false) {

				marker = new google.maps.Marker({

					position : latlng,

					draggable : true,

					animation : google.maps.Animation.DROP,

				});

				marker.setMap(map);

			}

		google.maps.event.addListener(map, 'idle', function() {

			if(navigator.geolocation && getOnce == false) {

				navigator.geolocation.getCurrentPosition(getPosition);

			}

		});

		google.maps.event.addListener(map, 'click', function(event) {

			moveMarker(event.latLng);

		});

		google.maps.event.addListener(marker, 'dragend', function(event) {

			moveMarker(event.latLng);

		});

		google.maps.event.addListener(autocomplete, 'place_changed', function() {

			var place = autocomplete.getPlace();

			if (place.geometry.viewport) {

	            map.fitBounds(place.geometry.viewport);

	          } else {

	            map.setCenter(place.geometry.location);

	            map.setZoom(17);  // Why 17? Because it looks good.

	          }

			moveMarker(place.geometry.location);

		});

	}

	function calcRoute(start, end) {

		$("#distanceText").html();

        var request = {

            origin:start,

            destination:end,

            travelMode: google.maps.DirectionsTravelMode.WALKING

        };

        directionsService.route(request, function(response, status) {

          if (status == google.maps.DirectionsStatus.OK) {

            directionsDisplay.setDirections(response);

            var route = response.routes[0];

            var distText = route.legs[0].distance.text;

            $("#distanceText").html('Total distance: ' + distText);

          }

        });

      }

	function moveMarker(position) {

		marker.setPosition(position);

		getClosest(position);

	}

	function getPosition(position) {

		latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

		getOnce = true;

		map.setCenter(latlng);

		map.setZoom(12);

		marker.setPosition(latlng);

		getClosest(latlng);

	}

	function getClosest(coords){

		$.ajax({

			url:"{% url closest %}",

			data: {"lat": coords.lat(), "lng": coords.lng()},

			type: "GET",

			cache: false,

			success:function(data){

				bounds = new google.maps.LatLngBounds();

				if (eduMarker){

					eduMarker.setMap(null);

				}

				bounds.extend(coords);

				bounds.extend(new google.maps.LatLng(data.lat, data.lng));

				eduMarker = new google.maps.Marker({

					position : new google.maps.LatLng(data.lat, data.lng),

					draggable : true,

					'icon': image,

					animation : google.maps.Animation.DROP,

				});

				eduMarker.setMap(map);

				map.fitBounds(bounds);

				calcRoute(coords, new google.maps.LatLng(data.lat, data.lng));

				google.maps.event

															.addListener(

																	eduMarker,

																	'click',

																	function() {

																		infoWindow.setContent( "<div>"

																				+ data.text

																				+ "</div>");

																		infoWindow

																				.open(

																						map,

																						eduMarker);

																	});

			}

		});

	}

function autocomplete() {

        var input = $('#searchTextField');

        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);

        var marker = new google.maps.Marker({

          map: map

        });

      }

function resizeMap()

{

	if (map != undefined)

	{

		google.maps.event.trigger(map, 'resize');

	}

	return false;

}

	$(document).ready(function() {

		initialize();

		resizeMap();

		$("#myloc").click(function(){

			navigator.geolocation.getCurrentPosition(getPosition);

			return false;

		});

		$("#mylocm").click(function(){

			navigator.geolocation.getCurrentPosition(getPosition);

			return false;

		});

	});

	$(window).resize(function(){

		resizeMap();

   });

		</script>

		{% endblock %}

 {% block header %}

    <div class="push-top"></div>

	<nav class="navbar navbar-default navbar-fixed-top">

      	<div class="container">

            <div class="navbar-header">

              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

              </button>

              <a class="navbar-brand" href="/"><img src="{% static 'img/eduroam_logo.png' %}" /></a>

            </div>

            <div id="navbar" class="navbar-collapse collapse">

            	<div class="col-sm-3 col-md-3 pull-right">

	      			<div class="input-group" style="margin-top: 8px;">

					    <span class="input-group-btn">

					    	<button  id="mylocm" class="btn btn-default" type="button">My location</button>

					    </span>

					    <input type="text" id="searchTextField" class="form-control" placeholder="Search for...">

					 </div>

	          	</div>

            	<div class="col-sm-3 col-md-3 pull-right" style="margin-top: 18px">

			      	<span id="distanceText"></span>

			    </div>

          	</div>

	</nav>

<div id="map_canvas" style="width:100%"></div>