Google Map API и карта с маршрутами

Question

У меня есть Google карту с маршрутами на моем сайте

<iframe src="https://www.google.com/maps/embed?pb=!1m46!1m12!1m3!1d204152.56634698433!2d174.4756264675282!3d-36.9170414111374!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m31!3e0!4m5!1s0x6d0d47f01acf61c9%3A0x1300ef6107147fb1!2s82+Federal+Street%2C+Auckland!3m2!1d-36.848918!2d174.762316!4m5!1s0x6d0d6f84ac9df8e1%3A0x2a00ef6165df7dd0!2sKarekare+Stream%2C+Karekare%2C+Auckland!3m2!1d-36.986930799999996!2d174.4746851!4m5!1s0x6d0d6f035335b4e1%3A0x500ef6143a2f790!2sPiha!3m2!1d-36.9530211!2d174.46880919999998!4m5!1s0x6d0d6aeadce234bf%3A0x500ef6143a306f0!2sSwanson%2C+Auckland!3m2!1d-36.8656784!2d174.57980329999998!4m5!1s0x6d0d47f01acf61c9%3A0x1300ef6107147fb1!2s82+Federal+St%2C+Auckland%2C+Auckland!3m2!1d-36.848918!2d174.762316!5e0!3m2!1sen!2snz!4v1468509676781" width="1200" height="400" frameborder="0" style="border:0" allowfullscreen></iframe> 

Но я хочу, чтобы отключить интерфейс по умолчанию, так что я буду использовать что-то вроде:

<div id="map"></div> 
    <script> 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: {lat: -33, lng: 151}, 
    disableDefaultUI: true 
    }); 

Но можно ли добавить мою текущую карту (с маршрутами) в функцию «initMap»? Или как добавить маршруты к функции «initMap»?

Answer 1

Добавление кода из this example in the documentation, модифицируя его принять your origin, destination and waypoints:

proof of concept fiddle

фрагмент кода:

function calculateAndDisplayRoute(start, end, waypoints, directionsService, directionsDisplay) { 
 
    directionsService.route({ 
 
    origin: start, 
 
    destination: end, 
 
    waypoints: waypoints, 
 
    travelMode: 'DRIVING' 
 
    }, function(response, status) { 
 
    if (status === 'OK') { 
 
     directionsDisplay.setDirections(response); 
 
    } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
    } 
 
    }); 
 
} 
 

 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: { 
 
     lat: -33, 
 
     lng: 151 
 
    }, 
 
    disableDefaultUI: true 
 
    }); 
 
    var directionsService = new google.maps.DirectionsService; 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    map: map 
 
    }); 
 
    var waypoints = [{ 
 
    location: "Karekare Stream", 
 
    stopover: false 
 
    }, { 
 
    location: "Piha, New Zealand", 
 
    stopover: false 
 
    }, { 
 
    location: "Swanson, Auckland, New Zealand", 
 
    stopover: false 
 
    }]; 
 
    calculateAndDisplayRoute("82 Federal Street, Auckland, 1010, New Zealand", "82 Federal Street, Auckland, 1010, New Zealand", waypoints, directionsService, directionsDisplay); 
 
}

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 
 
<div id="map"></div>