MVC5의 Google지도 API ASP.NET

안녕하세요. MVC asp.net 페이지에서이 Google지도 API v3을 만드는 방법을 알아낼 수 없습니다. MVC5의 Google지도 API ASP.NET

이

내가 뭘 잘못 확실하지 않다 페이지 코드

$(document).ready(function() { 
 
    var gmarkers = []; 
 
    var map; 
 

 
    function initialize() { 
 

 
     var mapProp = { 
 
      center: new google.maps.LatLng(20.593684, 78.96288), //India Lat and Lon 
 
      zoom: 2, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    } 
 

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

No aditional css 
 
/* 
 
no aditional css 
 
*/ 
 

 
Javascript

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMY7Oid9t6Cb6vus9KrjfBHY0TFiiSPqA" type="text/javascript"></script> 
 

 

 
<div class="row"> 
 
    <div class="col-md-6 text-justify" id="googleMap"> 
 
    </div> 
 
    
 
    <div class="col-md-6 text-justify"> 
 
     
 
     <h3> Dirección</h3> 
 
     <address> 
 
      Parque España 2 <br /> 
 
      San Martinito <br /> 
 
      72197 Tlaxcalancingo, PUE 
 
     </address> 
 

 
     <h3>¿Cómo llegar?</h3> 
 
     <br /> 
 
     <p> 
 
      Sobre vía Atlixcayotl en sentido a Atlixco, después de pasar la agencia Volkswagen Angelopolis, dar vuelta casi en "U" a la derecha. Continuar derecho pasando por Fracc. Santa Cecilia, adelante encontrarán a la izquierda la entrada al Fracc. Misión de San Martinito, en esa esquina dar vuelta a la derecha, avanzando 50 metros encontrarán la entrada al estacionamiento del Club donde pueden estacionarse; nuestras instalaciones están a la derecha de la puerta principal. 
 
     </p> 
 
     <h3>¿Perdido?</h3> 
 
     <p> 
 
      Llámanos y te orientamos tel. (222)699 54 18 /Cel. 22 21 61 32 02/ 22 23 23 12 46 en la ciudad de Puebla. 
 
     </p> 
 
    </div> 
 
</div>

입니다. googleMap - - 당신이 그것을 볼 수없는 이유는 공의 높이가 사전

출처

2015-02-03 Jose Ortega

브라우저 콘솔에 오류가 있습니까? –

구체적으로 무엇이 문제입니까? 오류가 있습니까? –

https://github.com/jmelosegui/GooglemapMvc을 보시오. –

에서

덕분에 난 컨테이너 DIV 그러나 당신의 구글지도가 제대로 작동 될 것입니다 확신합니다.

시험이 CSS를보십시오 :

#googleMap { min-height:100px }

출처

2015-02-03 13:48:51 timothyclifford

덕분에 내가 필요 정확히 무엇을 그 : P이 방법과 함께 만들기 위해 그것을 확장

.map_container{ 
    position: relative; 
    width: 100%; 
    height:100%; 
    padding-bottom: 56.25%; /* Ratio 16:9 (100%/16*9 = 56.25%) */ 
} 
.map_container #googleMaps { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: 0; 
    padding: 0; 
}

그리고 HTML에서

<div class="row"> 
    <div class="col-md-6"> 
     <div class="map_container"> 
      <div id="googleMaps" class="map_canvas"></div> 
     </div> 

    </div> 
    <div class="col-md-6 text-justify"> 
     <h3> Dirección</h3> 
     <address> 
      Parque España 2 <br /> 
      San Martinito <br /> 
      72197 Tlaxcalancingo, PUE 
     </address> 
    </div> 
</div>

그리고 번들에 js 파일을 추가하는 것을 잊지 마십시오. enter image description here

출처

2015-02-05 05:11:59

MVC5의 Google지도 API ASP.NET

답변

관련 문제