Intentando que mi mapa de Azure se muestre dentro de un jumbotron con un poco de relleno en los bordes. Hasta ahora no puedo lograr que permanezca dentro de los límites del Jumbotron con un poco de relleno. ¿Algunas ideas?
Guión en la cabeza:
<script type="text/javascript"> function InitMap() { var map = new atlas.Map('myMap', { style: 'satellite_road_labels', center: [-122.33, 47.6], zoom: 12, language: 'en-US', authOptions: { authType: 'subscriptionKey', subscriptionKey: 'xxxxxxxxxxxxx' } }); } </script>Cargas con cuerpo:
<body onload="InitMap()">Hoja de estilo dentro de la página:
<style> .mapContainer { position: relative; width: 100%; min-width: 290px; height: 600px; } #myMap { height: 100vh; width: 100vw; } .jumbotron { padding-top: 30px; padding-bottom: 30px; margin-bottom: 30px; color: inherit; background-color: #eee; } </style>Mapa dentro de la segunda columna donde está Jumbotron:
<div class="col-md-6"> <div class="jumbotron"> <div class="container-md"> <div id="myMap"></div></div> </div> </div>