0

Good day everyone. I can't figure out how to make this google map API v3 in a MVC asp.net page.

This is the page code

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

I'm not sure what am I doing wrong.

Thanks in advance

4

2 回答 2

1

I'm pretty sure your Google Map will be working correctly however the container div - googleMap - has a height of 0 which is why you can't see it.

Try this CSS to test:

#googleMap { min-height:100px }
于 2015-02-03T13:48:51.720 回答
1

Thanks that's exactly what I needed :P combined with this approach to make it scalable

.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;
}

And in the 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>

And please do not forget to add the js file into the bundle. enter image description here

于 2015-02-05T05:11:59.250 回答