Google map map в Bootstrap Модальный не работает

Question

Я пытаюсь отображать направления карты Google в модуле Bootstrap, но не отображает его всплывающее окно. Ниже приведен мой код.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 
     var rendererOptions = { 
      draggable: true 
     }; 
     var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);; 
     var directionsService = new google.maps.DirectionsService(); 
     var map; 

     var australia = new google.maps.LatLng(41.171418,28.311553); 

     function initialize() { 

      var mapOptions = { 
      zoom: 4, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: australia 
      }; 
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
      directionsDisplay.setMap(map); 
      directionsDisplay.setPanel(document.getElementById('directionsPanel')); 

      google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
      computeTotalDistance(directionsDisplay.directions); 
      }); 

      var trafficLayer = new google.maps.TrafficLayer(); 
      trafficLayer.setMap(map); 
      //calcRoute(); 
     } 

     function calcRoute() { 
      var start = document.getElementById("start").value; 
      var end = document.getElementById("end").value; 
      var distanceInput; 

      var request = { 
      origin: start, 
      destination: end, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }; 
      directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
      //distanceInput.value = response.routes[0].legs[0].distance.value/1000; 
      } 
      }); 
     } 

     function computeTotalDistance(result) { 
      var total = 0; 
      var time= 0; 
      var from=0; 
      var to=0; 
      var myroute = result.routes[0]; 
      for (var i = 0; i < myroute.legs.length; i++) { 
      total += myroute.legs[i].distance.value; 
      time +=myroute.legs[i].duration.text; 
      from =myroute.legs[i].start_address; 
      to =myroute.legs[i].end_address; 


      } 
      time = time.replace('hours','H'); 
      time = time.replace('mins','M'); 
      total = total/1000. 
      document.getElementById('from').innerHTML = from + '-'+to; 
      document.getElementById('duration').innerHTML = time ; 
      document.getElementById('total').innerHTML =Math.round(total)+" KM" ; 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 


     </script> 
<script type='text/javascript'> 

    $('#myMapModal').on('shown.bs.modal', function(e) { 
     var rendererOptions = { 
      draggable: true 
     }; 
     var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);; 
     var directionsService = new google.maps.DirectionsService(); 
     var map; 

     var australia = new google.maps.LatLng(41.171418,28.311553); 

     function initialize() { 

      var mapOptions = { 
      zoom: 4, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: australia 
      }; 
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
      directionsDisplay.setMap(map); 
      directionsDisplay.setPanel(document.getElementById('directionsPanel')); 

      google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
      computeTotalDistance(directionsDisplay.directions); 
      }); 
      calcRoute(); 

     google.maps.event.addDomListener(window, 'load', initialize); 
    }); 
    }); 
</script> 

Мой HTML:

<a href="#" data-lat="23, 18.33" data-toggle="modal" data-target="#myMapModal"> 
    Launch Map Modal 
</a> 
<input type="text" name="start" id="start" value="chennai"/> 
<input type="text" name="end" id="end" value="vellore"/> 

<div id="myMapModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <div id="map-canvas" style="margin-left:15px;margin-righ:15px;float:left;width:90%; height:450px"></div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

Я попытался его инициализации по-другому, но ничего не работает.

Answer 1

ОБНОВЛЕНИЕ: не нужно intialize на двух местах.подробнее внутри документа готово.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 
 
<script> 
 
     var rendererOptions = { 
 
      draggable: true 
 
     }; 
 
     var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);; 
 
     var directionsService = new google.maps.DirectionsService(); 
 
     var map; 
 

 
     var australia = new google.maps.LatLng(41.171418,28.311553); 
 

 

 
     function calcRoute() { 
 
      var start = document.getElementById("start").value; 
 
      var end = document.getElementById("end").value; 
 
      var distanceInput; 
 

 
      var request = { 
 
      origin: start, 
 
      destination: end, 
 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
      }; 
 
      directionsService.route(request, function(response, status) { 
 
      if (status == google.maps.DirectionsStatus.OK) { 
 
       directionsDisplay.setDirections(response); 
 
      //distanceInput.value = response.routes[0].legs[0].distance.value/1000; 
 
      } 
 
      }); 
 
     } 
 

 
     function computeTotalDistance(result) { 
 
      var total = 0; 
 
      var time= 0; 
 
      var from=0; 
 
      var to=0; 
 
      var myroute = result.routes[0]; 
 
      for (var i = 0; i < myroute.legs.length; i++) { 
 
      total += myroute.legs[i].distance.value; 
 
      time +=myroute.legs[i].duration.text; 
 
      from =myroute.legs[i].start_address; 
 
      to =myroute.legs[i].end_address; 
 

 

 
      } 
 
      time = time.replace('hours','H'); 
 
      time = time.replace('mins','M'); 
 
      total = total/1000. 
 
      document.getElementById('from').innerHTML = from + '-'+to; 
 
      document.getElementById('duration').innerHTML = time ; 
 
      document.getElementById('total').innerHTML =Math.round(total)+" KM" ; 
 
     } 
 

 
$(document).ready(function(){ 
 
\t initialize(); 
 
}); 
 
    $('#myMapModal').on('shown.bs.modal', function(e) { 
 
     var rendererOptions = { 
 
      draggable: true 
 
     }; 
 
     var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);; 
 
     var directionsService = new google.maps.DirectionsService(); 
 
     var map; 
 

 
     var australia = new google.maps.LatLng(41.171418,28.311553); 
 

 
    
 
    }); 
 

 
    
 
    function initialize() { 
 

 
     var mapOptions = { 
 
      zoom: 4, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
      center: australia 
 
     }; 
 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
     directionsDisplay.setMap(map); 
 
     directionsDisplay.setPanel(document.getElementById('directionsPanel')); 
 

 
     google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
 
      computeTotalDistance(directionsDisplay.directions); 
 
     }); 
 
     calcRoute(); 
 

 
}; 
 
</script> 
 

 
<a href="#" data-lat="23, 18.33" data-toggle="modal" data-target="#myMapModal"> 
 
    Launch Map Modal 
 
</a> 
 
<input type="text" name="start" id="start" value="chennai"/> 
 
<input type="text" name="end" id="end" value="vellore"/> 
 

 
<div id="myMapModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div id="map-canvas" style="margin-left:15px;margin-righ:15px;float:left;width:90%; height:450px"></div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>