Google 在 MVC5 ASP.NET 中映射 API

Question

大家好。我不知道如何在 MVC asp.net 页面中制作此 google 映射 API v3。

这是页面代码

$(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>

我不确定我做错了什么。

提前致谢

Answer 1

我很确定您的 Google 地图可以正常工作，但是容器 div - googleMap - 的高度为 0，这就是您看不到它的原因.

试试这个 CSS 来测试：

#googleMap { min-height:100px }

Answer 2

谢谢，这正是我所需要的 :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 文件添加到包中。

Google 在 MVC5 ASP.NET 中映射 API

Google map API in MVC5 ASP.NET

c#

asp.net-mvc

google-maps-api-3

asp.net-mvc-5

asp.net-mvc-5.2