RouteMap

by Lawrence Ross

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: 16,
      styles: [{
        "featureType": "poi",
        "elementType": "all",
        "stylers": [{
          "visibility": "off"
        }]
      }],
      gestureHandling: 'cooperative'
    });
    // console.log("zoom=" + map.getZoom());
    // console.log("zoom=" + map.getZoom()+" bounds="+map.getBounds().toUrlValue());
    google.maps.event.addListener(map, 'zoom_changed', function() {
      console.log("zoom=" + map.getZoom());
    });
    google.maps.event.addListener(map, 'bounds_changed', function() {
      console.log("zoom=" + map.getZoom()+" bounds="+map.getBounds().toUrlValue());
    });
    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 createSourceMarker() {
    new google.maps.Marker({
      position: sourceLocation,
      map: map,
      icon:...

CSS

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