Google Map и направления движения в Bootstrap

Question

У меня этот код работает сам по себе, без бутстрапа. По какой-то причине я еще не могу понять это, когда я включаю js по тегу script на странице contact.html, страница не отображает карту. Я знаю, что иногда бутстрап очень сложный. Я переместил свой скрипт после и перед тегом заголовка и не работал. Я проверил свой сценарий против справочника, который у меня есть, и я не могу найти ничего, что могло бы измениться, что могло бы помочь. Мне нужен совет любого из вас, гуру-бутстрапов. Наверное, будет что-то очень простое, что я упустил из виду. Я включаю карту в строке от 19 до 23. Пыльник будет мой код ....

<!-- Page Heading/Breadcrumbs --> 
    <div class="row"> 
     <div class="col-lg-12"> 
     <h1 class="page-header">Contact 
      <small>Mission Link</small> 
     </h1> 
     <ol class="breadcrumb"> 
      <li> 
      <a href="index.html">Home</a> 
      </li> 
      <li class="active">Contact</li> 
     </ol> 
     </div> 
    </div> 
    <!-- /.row --> 

     <!-- Content Row --> 
     <div class="row"> 
     <!-- Map Column --> 
     <div class="col-md-9"> 
      <div id="map"></div> 
      <div id="directions"></div> 
     </div> 
     <!-- Contact Details Column --> 
     <div class="col-md-3"> 
      <h3>Contact Details</h3> 
      <p> 
      One University Park Dr.<br>Nashville, TN 370204<br> 
      </p> 
      <p><i class="fa fa-phone"></i> 
      <abbr title="Phone">P</abbr>: (123) 456-7890</p> 
      <p><i class="fa fa-envelope-o"></i> 
      <abbr title="Email">E</abbr>: <a href="mailto:info@missionlink.org">info@missionlink.org</a> 
      </p> 
      <p><i class="fa fa-clock-o"></i> 
      <abbr title="Hours">H</abbr>: Monday - Friday/9:00 AM to 5:00 PM</p> 
     </div> 
     </div> 
     <!-- /.row --> 

############## JS

$(document).ready(function() { 
    'use strict'; 
    var directionsService = new google.maps.DirectionsService(); 
    var markers = []; 
    var myLatlng = new google.maps.LatLng(36.1053976, -86.8000707); 
    var mapOptions = { 
     zoom  : 8, 
     center : myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map($('#map').get(0), mapOptions); 

    var listener = 
    google.maps.event.addListener(map, 'click', function(event) { 
    var marker = new google.maps.Marker({position: event.LatLng, map: map}); 
    markers.push(marker); 
    if (markers.length > 1) { 
     google.maps.event.removeListener(listener); 
     var marker1 = markers[0]; 
     var marker2 = markers[1]; 
     var directionsRenderer = new google.maps.DirectionsRenderer(); 
     directionsRenderer.setMap(map); 
     directionsRenderer.setPanel($('#directions').get(0)); 
     var request = { 
      origin  : marker1.getPosition(), 
      destination: marker2.getPosition(), 
      travelMode : google.maps.TravelMode.DRIVING 
     }; 

     if(status == google.maps.DirectionsStatus.OK) { 
      directionsRenderer.setDirections(result); 
     } 
    } 
    }); 
}); 

Answer 1

1. событийно-свойство, которое возвращает щелкнул координат latLng не LatLng

   var marker = new google.maps.Marker({position: event.latLng, map: map}); 
   

2. вы должны вызвать маршрут-метод DirectionsService запросить направление

   directionsService.route(request, function(result, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionsRenderer.setDirections(result); 
       } 
       }); 
   

---

$(window).load(function() { 
 
    'use strict'; 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var markers = []; 
 
    var myLatlng = new google.maps.LatLng(36.1053976, -86.8000707); 
 
    var mapOptions = { 
 
     zoom  : 8, 
 
     center : myLatlng, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map($('#map').get(0), mapOptions); 
 

 
    var listener = 
 
    google.maps.event.addListener(map, 'click', function(event) { 
 
    var marker = new google.maps.Marker({position: event.latLng, map: map}); 
 
    markers.push(marker); 
 
    if (markers.length > 1) { 
 
     google.maps.event.removeListener(listener); 
 
     var marker1 = markers[0]; 
 
     var marker2 = markers[1]; 
 
     var directionsRenderer = new google.maps.DirectionsRenderer(); 
 
     directionsRenderer.setMap(map); 
 
     directionsRenderer.setPanel($('#directions').get(0)); 
 
     var request = { 
 
      origin  : marker1.getPosition(), 
 
      destination: marker2.getPosition(), 
 
      travelMode : google.maps.TravelMode.DRIVING 
 
     }; 
 
      directionsService.route(request, function(result, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsRenderer.setDirections(result); 
 
     markers[0].setMap(null); 
 
     markers[1].setMap(null); 
 
    } 
 
    }); 
 

 
    } 
 
    }); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> 
 
<div id="map"></div>