谷歌地图Bootstrap 3

我想把两个按钮放在我的谷歌地图画布下（其中一个是下拉按钮）。没有按钮标记，Google地图加载正常。当我添加按钮代码时，地图消失。 map元素和按钮都在同一个容器和列中，但在不同的行上。谷歌地图Bootstrap 3

<div class="container-fluid pushdown"> 

    <div class="row"> 
    <div class="col-md-2"></div> 
    <div class="col-md-8"><div class="map" id="map"></div></div> 
    <div class="col-md-2"></div> 
    </div> 

    <div class="row"> 
    <div class="col-md-2"></div> 
    <div class="col-md-8"> 
     <div id="controls"> 
     <button class="btn btn-default btn-lg dropdown-toggle location"type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Select<span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu"> 
      <li><input type="checkbox" class="Check" name="traders[]" value="1"/><label class="CheckText">Trader1</label></li> 
      <li><input type="checkbox" class="traderCheck" name="traders[]" /><label class="traderCheckText">Trader2</label></li> 
     </ul> 
     <button onclick="location.href = 'search.html';" type="button" class="btn btn-default btn-lg" id="searchButton">Search <span class="glyphicon glyphicon-search"></span></button> 
     </div> 
    </div> 
    <div class="col-md-2"></div> 
    </div> 

</div>

而JS：

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: -34.397, lng: 150.644}, 
    zoom: 16, 
    disableDefaultUI: true 
    }); 

    var marker = new google.maps.Marker({ 
    position: {lat: -34.397, lng: 150.644}, 
    draggable:true 
    }); 

    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     }; 
     map.setCenter(pos); 
     marker.setPosition(pos); 
     marker.setMap(map); 
    }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleLocationError(false, infoWindow, map.getCenter()); 
    } 
} 

function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
    'Error: The Geolocation service failed.' : 
    'Error: Your browser doesn\'t support geolocation.'); 
}

map元素CSS：

.map { 
    width: 100%; 
    height: 500px; 
    background-color: blue; 
}

另外，我只用在第二行的3列尝试它（不按钮元素）地图消失了。这意味着我的问题与Bootstrap有关。

来源

2016-01-05 Adam Howard

创建复制问题的演示。很难理解为什么简单地在页面上添加其他几个元素会使地图消失。你提供了地图容器的尺寸吗？ – charlietfl

同意@charlietfl。我认为这只是一个CSS问题。 – Alexis

我试过了，没有按钮元素（只有3个引导列），问题依然存在。 –

试试这种方法。

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     center: {lat: -34.397, lng: 150.644}, 
 
     zoom: 16, 
 
     disableDefaultUI: true 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
     position: {lat: -34.397, lng: 150.644}, 
 
     draggable:true 
 
    }); 
 

 
    // Try HTML5 geolocation. 
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 
     var pos = { 
 
      lat: position.coords.latitude, 
 
      lng: position.coords.longitude 
 
      }; 
 

 
      map.setCenter(pos); 
 
      marker.setPosition(pos); 
 
      marker.setMap(map); 
 
     }, function() { 
 
      handleLocationError(true, infoWindow, map.getCenter()); 
 
     }); 
 
    } else { 
 
     // Browser doesn't support Geolocation 
 
     handleLocationError(false, infoWindow, map.getCenter()); 
 
    } 
 
} 
 

 
function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
 
    infoWindow.setPosition(pos); 
 
    infoWindow.setContent(browserHasGeolocation ? 
 
    'Error: The Geolocation service failed.' : 
 
    'Error: Your browser doesn\'t support geolocation.'); 
 
} 
 
    
 
    </script> 
 

 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrwOEvG-QIFrYPBCwRVTvXvSuzcnz38Xs&signed_in=true&callback=initMap" 
 
     async defer> 
 
    </script>

.map{ 
 
    width: 100%; 
 
    height: 500px; 
 
    background-color: blue; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container-fluid pushdown"> 
 
    <div class="row"> 
 
     <div class="col-md-2"></div> 
 
     <div class="col-md-8"><div class="map" id="map"></div></div> 
 
     <div class="col-md-2"></div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-md-2"></div> 
 
     <div class="col-md-8"> 
 
     <div id="controls"> 
 

 
      <button class="btn btn-default btn-lg dropdown-toggle location"type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    Select<span class="caret"></span> 
 
      </button> 
 

 
      <ul class="dropdown-menu"> 
 
       <li> 
 
        <input type="checkbox" class="Check" name="traders[]" value="1"/> 
 
        <label class="CheckText">Trader1</label></li> 
 

 
       <li> 
 
        <input type="checkbox" class="traderCheck" name="traders[]" /> 
 
        <label class="traderCheckText">Trader2</label></li> 
 
      </ul> 
 

 
      <button onclick="location.href = 'search.html';" type="button" class="btn btn-default btn-lg" id="searchButton">Search <span class="glyphicon glyphicon-search"></span></button> 
 

 
     </div> 
 
</div> 
 
<div class="col-md-2"></div>

来源

2016-01-05 16:21:20

谷歌地图Bootstrap 3

回答

相关问题