谷歌地圖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

回答

相關問題