Карта Google не видела: Google map DirectionsService in asp.net mvc

Question

Я использую следующий код для просмотра карты google с RouteAlternatives. Когда я сохраняю это на странице .html и открываю его. Это работает, но когда в представлении asp.net mvc 4 карта google не отображается, но маршрут Альтернативы - это вид в левой части. На странице макета я использую jquery-1.7.1.min.js и query-ui- 1.8.20.min.js и т. Д. Как увидеть это в представлении asp.net mvc. Спасибо заранее.

<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script src="/Scripts/jquery-1.11.0.min.js"></script> 

<script> 
    var directionDisplay; 
    var directionsRenderer; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function drawMap(midpoint) { 
     var mid = midpoint.split(","); 
     var start = new google.maps.LatLng(mid[0], mid[1]); 
     var myOptions = { 
      zoom:7, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: start, 
      mapTypeControl: false 
      } 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 

    function getRendererOptions(main_route) 
    { 
     if(main_route) 
     { 
      var _colour = '#00458E'; 
      var _strokeWeight = 4; 
      var _strokeOpacity = 1.0; 
      var _suppressMarkers = false; 
     } 
     else 
     { 
      var _colour = '#ED1C24'; 
      var _strokeWeight = 2; 
      var _strokeOpacity = 0.7; 
      var _suppressMarkers = false; 
     } 

     var polylineOptions = {strokeColor: _colour, strokeWeight: _strokeWeight, strokeOpacity: _strokeOpacity }; 
     var rendererOptions = {draggable: true, suppressMarkers: _suppressMarkers, polylineOptions: polylineOptions}; 
     return rendererOptions; 
    } 

    function renderDirections(result, rendererOptions, routeToDisplay) 
    { 
     if(routeToDisplay==0) 
     { 
      var _colour = '#00458E'; 
      var _strokeWeight = 4; 
      var _strokeOpacity = 1.0; 
      var _suppressMarkers = false; 

      var directionsRenderer = new google.maps.DirectionsRenderer({ 
       draggable: true, 
       suppressMarkers: _suppressMarkers, 
       polylineOptions: { 
        strokeColor: _colour, 
        strokeWeight: _strokeWeight, 
        strokeOpacity: _strokeOpacity 
       } 
      }); 
      directionsRenderer.setMap(map); 
      directionsRenderer.setPanel(document.getElementById('directions_panel')); 
      directionsRenderer.setDirections(result); 
      directionsRenderer.setRouteIndex(routeToDisplay); 
     } 
     else 
     { 
      var _colour = '#ed1c24'; 
      var _strokeWeight = 4; 
      var _strokeOpacity = 0.7; 
      var _suppressMarkers = false; 

      var directionsRenderer = new google.maps.DirectionsRenderer({ 
       draggable: true, 
       suppressMarkers: _suppressMarkers, 
       polylineOptions: { 
        strokeColor: _colour, 
        strokeWeight: _strokeWeight, 
        strokeOpacity: _strokeOpacity 
       } 
      }); 
      directionsRenderer.setMap(map); 
      directionsRenderer.setDirections(result); 
      directionsRenderer.setRouteIndex(routeToDisplay); 
     } 

     // if (routeToDisplay == 0) _colour = "#FF0000"; 
      // create new renderer object 
    } 

    function requestDirections(start, end, routeToDisplay, main_route) { 
     var request = { 
       origin: start, 
       destination: end, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING, 
       provideRouteAlternatives: main_route 
     }; 

     directionsService.route(request, function(result, status) { 
      if (status == google.maps.DirectionsStatus.OK) 
      { 
       if(main_route) 
       { 
        var rendererOptions = getRendererOptions(true); 
        for (var i = 0; i < result.routes.length; i++) 
        { 
         renderDirections(result, rendererOptions, i); 
        } 
       } 
       else 
       { 
        rendererOptions = getRendererOptions(false); 
        renderDirections(result, rendererOptions, routeToDisplay); 
       } 
      } 
     }); 
    } 
</script> 
<div id="map_canvas" style="float:left;width:67.5%;height:100%; border:solid black "></div> 
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px; border:solid black"> 
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 
</div> 
<script> 
    requestDirections('(9.8167, 80.2333)', '(9.6667, 80.0000)', 0, true); 
    drawMap("51.3879120942,-0.15028294518"); 
</script> 

Answer 1

Вот работает скрипку

http://jsfiddle.net/jLLukrux/5/

CSS

#map_canvas{ 
float:left; 
width:67.5%; 
height:100%; 
border:solid black; 
position:fixed!important; 
}