Google maps API asp.net

Я пытаюсь использовать API карт Google в ASR.NET mvc. Я хочу использовать DirectionsRenderer. Я прочитал документацию об этом here и попытался использовать пример Но эта карта не отображается на моем сайте. Где может быть проблема?Google maps API asp.net

<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false"> 
    </script> 
    <script> 
     var directionDisplay; 
     var directionsService = new google.maps.DirectionsService(); 

     function initialize() { 
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      var mapOptions = { 
       zoom: 7, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       center: new google.maps.LatLng(41.850033, -87.6500523) 
      }; 
      var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
      directionsDisplay.setMap(map); 
      directionsDisplay.setPanel(document.getElementById('directions-panel')); 

      var control = document.getElementById('control'); 
      control.style.display = 'block'; 
      map.controls[google.maps.ControlPosition.TOP].push(control); 
     } 

     function calcRoute() { 
      var start = document.getElementById('start').value; 
      var end = document.getElementById('end').value; 
      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); 
       } 
      }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body onload="initialize()"> 
    <div id="control"> 
     <strong>Start:</strong> 
     <select id="start" onchange="calcRoute();"> 
      <option value="chicago, il">Chicago</option> 
      <option value="st louis, mo">St Louis</option> 
     </select> 
     <strong>End:</strong> 
     <select id="end" onchange="calcRoute();"> 
      <option value="chicago, il">Chicago</option> 
      <option value="st louis, mo">St Louis</option> 
     </select> 
    </div> 
    <div id="map-canvas" style="float: left; width: 70%; height: 100%"> 
    </div> 
    <div id="directions-panel" style="float: right; width: 30%; height: 100%"> 
    </div> 
</body>

источник

2013-03-28 Bashnia007

Дайте вашей карте фиксированную ширину и высоту. – Marcelo

убедитесь, что вы установили правильный ключ в сценарии src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false", как я попробовал ваш код с моим собственным ключом, и это работает .. если вы хотите функцию calcRoute(); называться на странице load просто добавьте эту строку в конце функции инициализации calcRoute();

источник

2013-03-28 11:34:27

Google maps API asp.net

ответ

Смежные вопросы