<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSejguETVoZUJZcgxaxEM9JcrxGKY_4U8"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
  </head>

  <body>
    <input type="button"  id="nb" onclick="javascript:init()" value="Ruta" />
    <div id="map"></div>
   
    
  </body>
</html>

function init(){
  document.getElementById('map').style.display = 'block';
  document.getElementById('nb').style.display = 'none';
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 19.301263, lng: -99.187898}
  })
  var directionsService = new google.maps.DirectionsService() 
  var waypoints = []
  waypoints.push({location: "Calle Mayas 29-183 Tlalcoligia 14430 Ciudad de México, CDMX", stopover: true})
  waypoints.push({location: "Av. Adolfo López Mateos Evolucion Nezahualcóyotl, Méx.", stopover: true})
  
  
  directionsService.route({
    origin: "Constitución de 1917, Los Ángeles, Ciudad de México, CDMX",
    destination: "Carr. Picacho-Ajusco Km 1.5, Tlalpan, 14200 Ciudad de México, CDMX", 
    waypoints: waypoints,
    optimizeWaypoints: false,
    travelMode: 'DRIVING'
  }, function(response, status){
    if (status === 'OK'){
      var myroute = response.routes[0]
      var indice = 0
      for(var i = 0; i < myroute.legs.length; i++){
        indice = i 
        var marker = new MarkerWithLabel({
          map: map,
          position: myroute.legs[i].start_location,
          icon: 'http://www.spacanino.com.mx/images/pointer.png',
          labelContent: '' + (indice+1),
          labelAnchor: new google.maps.Point(15, 30),
          labelClass: 'marker-label accurate-marker',
          labelInBackground: false
        })
        if(i == myroute.legs.length -1)
          var marker = new MarkerWithLabel({
            map: map,
            position: myroute.legs[i].end_location,
            icon: 'http://www.spacanino.com.mx/images/pointer.png',
            labelContent: '' + (indice+2),
            labelAnchor: new google.maps.Point(15, 30),
            labelClass: 'marker-label accurate-marker',
            labelInBackground: false
          })
      }
    }
  })
}
/* Styles go here */
#map{
  width:1200px;
  height:700px;
}
.accurate-marker {
  border: 1px solid #025602;
  background: #c1ffb7;
  color: #025602; }
.marker-label {
  width: 30px;
  height: 20px;
  border: 1px solid #020556;
  border-radius: 5px;
  background: #b7baff;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
  font-size: 14px;
  color: #020556; }