Laravel 5.2, jQuery, Google Maps API w/Custom Overlay & HighCharts (http://hiekr.com/trail/pct/map)

trail_map.blade.php

@extends('layouts.app_sidebar')
@section('title', $title)
@section('content')

	<!-- Trail Header -->
	@include('app.trail.partials.header')

	<!-- Map -->
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-block">
					<form action="#" class="filter form-inline">
					  <div class="filter-options">
						<div class="form-group m-r-1">
						  <label for="section-select">Section:</label>
						  <select name="section-select" id="section-select" class="section-select c-select">
							<option value="all">All</option>
							@foreach($sections as $section)
								<option value="{{ $section->slug }}">{{ $section->title }} - {{ $section->title_more }}</option>
							@endforeach
						  </select>
						</div>
						<div class="form-group m-r-1">
						  <label for="marker-select">Markers:</label>
						  <select name="marker-select" id="marker-select" class="marker-select c-select">
							<option value="">(Select)</option>
							@if ($waypointTypes)
							@foreach($waypointTypes as $waypointType)
								<option value="{{ $waypointType->slug }}">{{ $waypointType->title }}</option>
							@endforeach
							@endif
						  </select>
						</div>
						<div class="form-group pull-right">
							  <button type="button" id="share-map" data-toggle="modal" data-target="#share-map-modal" class="btn btn-primary"><i class="fa fa-share-alt"></i></button>
							@include('app.trail.partials.share_map')
						</div>
					  </div>
					</form>
				</div>
				<div class="map-container">
					<div id="map" style="height:500px; width: 100%"></div>
				</div>
			</div>
		</div>
	</div>

	<!-- Elevation -->
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-block">
					<p class="h5">{{ $trail->title }} <strong>Elevation</strong></p>
					<div id="line" style="width: 100%; height:230px;"></div>
				</div>
			</div>
		</div>
	</div>

	<!-- Row -->
	<div class="row">

		<!-- Column Left -->
		<div class="col-md-6">
			<div class="card">
				<div class="card-block">
					<p class="h5">Browse by <strong>Section</strong></p>

					@if (count($sections))
					<div class="">
						@foreach($sections as $key => $value)
							<a href="{{ route('trail.section', array($trail->slug, $value->slug)) }}">{{ $value->title }} - {{ $value->title_more }}</a><br />
						@endforeach
					</div>
					@else
						<p>{{ trans('site.nodata') }}</p>
					@endif
				</div>
			</div>
		</div>

	</div>

@stop

@section('scripts')
	<script>

	var map, polylines = [], markers = [];

	// Initialize map
	function initMap() {
		map = new google.maps.Map(document.getElementById('map'), {
			scrollwheel: false,
			mapTypeId: google.maps.MapTypeId.TERRAIN,
			styles:	[{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color": colors['primary-color']},{"visibility":"on"}]}]
		});

		var sectionSlug = getParameterByName('section-select');
		var waypointSlug = getParameterByName('marker-select');

		if(sectionSlug) {
			$("#section-select").val(sectionSlug);
			loadSectionTracks(sectionSlug);
		} else {
			loadTrailTracks();
		}

		if(waypointSlug) {
			$("#marker-select").val(waypointSlug);
			loadWaypoints();
		}
	}

	// Load trail tracks for all sections
	function loadTrailTracks() {
		$.ajax({
			type: "GET",
			url: "/trail/{{ $trail->slug }}/tracks",
			success: function(trackPoints) {
				for (var i = 0; i < trackPoints.length; i++) {
					addPolyline(trackPoints[i]);
				}

				var firstTrack = trackPoints[0], lastTrack = trackPoints[trackPoints.length - 1];

				setCenterAndZoom(firstTrack[0], lastTrack[lastTrack.length - 1]);
			}
		});
	}

	// Load section specif tracks
	function loadSectionTracks(section) {
		$.ajax({
			type: "GET",
			url: "/trail/{{ $trail->slug }}/tracks/" + section,
			success: function(trackPoints) {
				addPolyline(trackPoints);
				setCenterAndZoom(trackPoints[0], trackPoints[trackPoints.length - 1]);
			}
		});
	}

	// Load waypoints
	function loadWaypoints() {
		var waypointType = $("#marker-select").val();
		var section = $("#section-select").val();
		var url = '/trail/{{ $trail->slug }}/waypoints/' + waypointType;

		clearMarkers();

		if(section != 'all') {
			url += '/' + section;
		}

		if(waypointType) {
			$.ajax({
				type: "GET",
				url: url,
				success: function(waypoints) {
					for (var i = 0; i < waypoints.length; i++) {
						addMarker(waypoints[i], waypointType);
					}
				}
			});
		}
	}

	function setCenterAndZoom(startPoints, endPoints) {
		var start = new google.maps.LatLng(startPoints['lat'], startPoints['lng']);
		var end = new google.maps.LatLng(endPoints['lat'], endPoints['lng']);

		var bounds = new google.maps.LatLngBounds();

		bounds.extend(start);
		bounds.extend(end);

		map.fitBounds(bounds);
	}

	// Add polyline on map
	function addPolyline(points) {
		var polyline = new google.maps.Polyline({
			path: points,
			geodesic: true,
			strokeColor: '#FF0000',
			strokeOpacity: 1.0,
			strokeWeight: 2,
			map: map
		});

		polylines.push(polyline);
	}

	// Clear all polylines from map
	function clearPolylines() {
		polylines.forEach(function(polyline) {
			polyline.setMap(null);
		});

		polylines = [];
	}

	// Clear all markers from map
	function clearMarkers() {
		markers.forEach(function(marker) {
			marker.setMap(null);
		});

		markers = [];
	}

	// Add marker on map
	function addMarker(waypoint, waypointType) {
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(waypoint.lat, waypoint.lng),
			title: waypoint.title,
			label: waypointType.charAt(0).toUpperCase(),
			map: map
		});

		var infowindow = new google.maps.InfoWindow({
			content: '<h5><a href="/trail/{{ $trail->slug }}/waypoint/' + waypoint.slug + '">' + waypoint.title + '</a></h5>'
		});

		marker.addListener('click', function() {
			infowindow.open(map, marker);
		});

		/*marker.addListener('mouseover', function() {
			infowindow.open(map, marker);
		});

		marker.addListener('mouseout', function() {
			infowindow.close();
		});*/

		markers.push(marker);
	}

	function getParameterByName( name ){
		var regexS = "[\\?&]"+name+"=([^&#]*)",
				regex = new RegExp( regexS ),
				results = regex.exec( window.location.search );
		if( results == null ){
			return "";
		} else{
			return decodeURIComponent(results[1].replace(/\+/g, " "));
		}
	}

	(function ($) {
		$('#share-map').click(function() {
			var section = $('#section-select').val();
			var marker = $('#marker-select').val();

			$('#share-map-url').val('{{ route('trail.map', $trail->slug) }}?section-select=' + section + '&marker-select=' + marker);
		});

		// Listen to marker change event
		$("#marker-select").change(function() {
			loadWaypoints();
		});

		// Listen to section change event
		$("#section-select").change(function() {
			var section = $('option:selected', this).val();

			clearPolylines();

			if(section == 'all') {
				loadTrailTracks();
			} else {
				loadSectionTracks(section);
			}

			loadWaypoints();
		});

		if ($('#line').length) {
			loadElevationChart();
		}
	}(jQuery));

	function loadElevationChart() {

		$.ajax({
			type: "GET",
			url: '/trail/{{ $trail->slug }}/mileage',
			success: function(data) {
				$('#line').highcharts({
					chart: {
						zoomType: 'x'
					},
					title: {
						text: ''
					},
					subtitle: {
						text: document.ontouchstart === undefined ?
								'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
					},
					xAxis: {
						title: {
							text: 'Mileage'
						}
					},
					yAxis: {
						title: {
							text: 'Elevation'
						}
					},
					legend: {
						enabled: false
					},
					plotOptions: {
						area: {
							fillColor: {
								linearGradient: {
									x1: 0,
									y1: 0,
									x2: 0,
									y2: 1
								},
								stops: [
									[0, Highcharts.getOptions().colors[0]],
									[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
								]
							},
							marker: {
								radius: 2
							},
							lineWidth: 1,
							states: {
								hover: {
									lineWidth: 1
								}
							},
							threshold: null
						}
					},

					series: [{
						type: 'area',
						name: 'Elevation',
						data: data
					}]
				});
			}
		});
	}

	$(document).ready(function() {
		new Clipboard('.btn');
	});

	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDb9Vn_vFUg4QHROCtkS1W_jA1OI5aSZbA&callback=initMap"></script>
	<script src="/js/highcharts.js"></script>
	<script src="/js/clipboard.min.js"></script>
@stop