<!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; }