RouteMap

by harlowpl

HTML

<div id="map"></div>
<script>   
	          var sourceLocation = {
	          lat: 52.340822,
	          lng: 16.855841
	          };
	          var destinationLocations = [{
	          lat: 52.344583,
	          lng: 16.849864
	          },
	          {
	          lat: 52.343319,
	          lng: 16.855080
	          },	          

	          ];
	          var directionsService;
	          var directionsDisplay;
	          var infoWindow;

	          function initMap() {
	          map = new google.maps.Map(document.getElementById('map'), {
	          center: {
	          lat: 52.343580,
	          lng: 16.857495
	          },
	          zoom: 15.5,
            styles:
							[
    						{
        					"featureType": "poi",
        					"elementType": "all",
        					"stylers": [
            				{
                			"visibility": "off"
            				}
        					]
    						}
               ],
    										
					  gestureHandling: 'cooperative'
	          });
	          infoWindow = new google.maps.InfoWindow();
	          directionsService = new google.maps.DirectionsService();
	          directionsDisplay = new google.maps.DirectionsRenderer({
	          map: map,
            preserveViewport: true,
	          markerOptions: {
	          visible: false
	          }
	          });
                                   
	          createSourceMarker();
	          createDestinationMarkers();
	          }

	          function markerClicked(destinationLocation) {
	          var directionsRequest = {
	          origin: sourceLocation,
	          destination: destinationLocation,
	          travelMode: 'DRIVING'
	          };

	          directionsService.route(directionsRequest, handleDirectionResults);
	          }

	          function handleDirectionResults(result, status) {
	          if (status === 'OK') {
	          directionsDisplay.setDirections(result);
	          } else {
	          console.log(status);
	          }
	          }


	          function...

CSS

#map {
  height:600px; 
  width:100%;
  }