google-road

google-road.js

//Плагин позволяет прокладывать маршрут на карте гугл, подключаем скрипт себе в app.js или common.js

	//google road-plugin

		function initMap() {
				var markerArray = [];

				// Instantiate a directions service.
				var directionsService = new google.maps.DirectionsService;

				// Create a map and center it on Manhattan.
				var map = new google.maps.Map(document.getElementById('map'), {
						zoom: 15,
						center: {lat: 50.017234, lng: 36.2072981}
				});
				var marker = new google.maps.Marker({
						position: {lat: 50.017234, lng: 36.2072981},
						map: map,
						icon: "http://www.zolotie-kluchi.kharkov.ua/wp-content/themes/golden_keys/img/map-marker-icon.png"
				});

				// Create a renderer for directions and bind it to the map.
				var directionsDisplay = new google.maps.DirectionsRenderer({map: map});

				// Instantiate an info window to hold step text.
				var stepDisplay = new google.maps.InfoWindow;

				// Display the route between the initial start and end selections.
				calculateAndDisplayRoute(
						directionsDisplay, directionsService, markerArray, stepDisplay, map);
				// Listen to change events from the start and end lists.
				var onChangeHandler = function() {
						calculateAndDisplayRoute(
								directionsDisplay, directionsService, markerArray, stepDisplay, map);
				};
				document.getElementById('start').addEventListener('change', onChangeHandler);
		}
		var end = "Харків, вулиця Весела 30";
		function calculateAndDisplayRoute(directionsDisplay, directionsService,
																			markerArray, stepDisplay, map) {
				// First, remove any existing markers from the map.
				for (var i = 0; i < markerArray.length; i++) {
						markerArray[i].setMap(null);
				}

				// Retrieve the start and end locations and create a DirectionsRequest using
				// WALKING directions.
				directionsService.route({
						origin: "Харьковская область" + document.getElementById('start').value,
						destination: end,
						travelMode: google.maps.TravelMode.WALKING
				}, function(response, status) {
						// Route the directions and pass the response to a function to create
						// markers for each step.
						if (status === google.maps.DirectionsStatus.OK) {
								document.getElementById('warnings-panel').innerHTML =
										'<b>' + response.routes[0].warnings + '</b>';
								directionsDisplay.setDirections(response);
								showSteps(response, markerArray, stepDisplay, map);
						} else {
								window.console.log('Directions request failed due to ' + status);
						}
				});
		}

		function showSteps(directionResult, markerArray, stepDisplay, map) {
				// For each step, place a marker, and add the text to the marker's infowindow.
				// Also attach the marker to an array so we can keep track of it and remove it
				// when calculating new routes.
				var myRoute = directionResult.routes[0].legs[0];
				for (var i = 0; i < myRoute.steps.length; i++) {
						var marker = markerArray[i] = markerArray[i] || new google.maps.Marker;
						marker.setMap(map);

				}
		}

		function attachInstructionText(stepDisplay, marker, text, map) {
				google.maps.event.addListener(marker, 'click', function() {
						// Open an info window when the marker is clicked on, containing the text
						// of the step.
						stepDisplay.setContent(text);
						stepDisplay.open(map, marker);
				});
		};

//html добавляем себе в индекс

		<a href="#" id="calcRout" class="btn-custom">ПРОЛОЖИТЬ МАРШРУТ</a>

					<div id="floating-panel">
						<b>Введите стартовый адрес: </b>
						<input id="start" type="text">
					</div>

					<div id="warnings-panel"></div>
				</div>

				<div id="map"></div>

//подключаем в футере перед закрывающим тегом body
	<script async defer
		src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFWqJpw6jfz58aJKpUqQucr4NM-Ye-Sz4&callback=initMap">
	</script>