Map Simple for 38369225

by Wolf

HTML

<div id="map"></div>
<div id="output"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.29&key=AIzaSyCOW7b0eVJzLBlTz1eY9XP04VJ48C_uaMQ&callback=initMap" async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var directionsDisplay;
var directionsService;
var map;

function initMap() {
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  var origin = {
    lat: 35.325962,
    lng: 139.532983
  };
  var mapOptions = {
    zoom: 8,
    center: origin
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);

  var directionsService = new google.maps.DirectionsService;

  var waypts = [{
    'location': {
      'lat': 35.31873314,
      'lng': 139.5516587
    },
    'stopover': true
  }];
  console.log("waypts[0].location | outer scope");
  console.log(waypts[0].location);

  directionsService.route({
    waypoints: waypts,
    travelMode: 'DRIVING',
    origin: origin,
    destination: {
      'lat': 35.302216,
      'lng': 139.580892
    },
    optimizeWaypoints: false,
    region: 'JP',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidTolls: true,
    avoidHighways: true
  }, function(response, status) {
    console.log("waypts[0].location | route() callback");
    console.log(waypts[0].location);
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });

}