Greyed Div aufgrund eines Konflikts zwischen Bootsrap und Google Maps

Ich versuche Google Maps API in meiner Website zu implementieren, leider mit wenig Erfolg.Greyed Div aufgrund eines Konflikts zwischen Bootsrap und Google Maps

Ich benutze Bootstrap mit den meisten der CSS-Einstellungen unberührt.

Nach einem ganzen Tag der Erforschung und Erkundung fand ich heraus, dass, wenn ich die 3 CDN Kodierzeilen von Bootstrap von meinem Code zu entfernen:

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Google Karte lädt perfekt, aber wenn die bootsrap Code ausgeführt wird dann sehe ich nur ein graues Div mit der Google-Signatur darin.

Auch. Ich habe herausgefunden, dass wenn ich die Größe des Browsers ändere, die Karte wie erwartet geladen wird.

Las Sache, die Karte ist in einer Registerkarte, einer von fünf und ich habe nicht die ursprünglichen CSS-Einstellungen für die Registerkarten geändert.

Bitte helfen,

-Code unten:

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta charset="UTF-8"> 
        <meta name="viewport" content="initial-scale=1.0"> 
      <title>sys</title> 
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
      <link href='http://fonts.googleapis.com/earlyaccess/notosans.css' rel='stylesheet' type='text/css'> 
      <link href="includes/styles.css" rel="stylesheet" type="text/css"> 
      <link rel="icon" type="image/png" href="includes/icons/favicon.png" /> 
      <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
      <script src="js/ajax.js"></script> 
        <script src="js/hideCaseDetailsifVolunteer.js"></script> 




     <script> 
       var map; 
       function initMap() { 
        map = new google.maps.Map(document.getElementById('googleMap'), { 
         center: {lat: -34.397, lng: 150.644}, 
         zoom: 8 
        }); 
       } 


       function loadScript() 
       { 
        var script = document.createElement("script"); 
        script.type = "text/javascript"; 
        script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyAfUA7aWeXe4fxoBE9PzjWRJ3MRlcSaYh0&callback=initMap"; 
        document.body.appendChild(script); 
       } 

       window.onload = loadScript; 
    </script> 

.... 
..... 
.... 
.... 



    <div id="menu4" class="tab-pane fade"> 
    <div id="map-container"> 
    <div id="googleMap" style="width:100%;height:400px;"></div> 
    </div> 

    </div>

CSS:

@media (max-width: 970px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left, .navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none !important; 
    } 
    .navbar-nav { 
     float: none !important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav > li { 
     float: none; 
    } 
    .navbar-nav > li > a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in { 
     display: block !important; 
    } 
} 

nav, header, section, footer, article { 
    display: block; 
} 

.container { 
} 

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { 
    background-color: #4CAF50; 
} 
.navbar-custom .navbar-toggle, .navbar-custom .nav .open > a, .navbar-custom .nav .open > a:hover, .navbar-custom .nav .open > a:focus { 
    background-color: #FFC107; 
} 
.navbar-custom { 
    background-color: #263238; 
    color: #FFFFFF; 
    border-radius: 0; 
} 

.navbar-custom .navbar-nav > li > a { 
    color: #fff; 
} 
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus { 
    color: #ffffff; 
    background-color: transparent; 
} 

.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus { 
    text-decoration: none; 
    background-color: #FFC107; 
} 

.navbar-custom .navbar-brand { 
    color: #F44336; 
} 

.navbar-custom .navbar-toggle { 
    background-color: #607D8B; 
} 
.navbar-custom .icon-bar { 
    background-color: #FFFFFF; 
} 
.dropdown-menu > li > a { 
    color: #515151; 
} 
.color_position { 
    color: #0a8b9b; 
    font-size: 80%; 
} 
.logo { 
    position: relative; 
    bottom: 10px; 
    height: 38px; 
    width: 163px; 
} 
.navbar-collapse { 
    border-top: 0px !important; 
    box-shadow: none; 
} 
.right-to-left { 
    margin-top: 30px; 
} 

.right-to-left li { 
    float: right; 
} 
.tab-content { 
    direction: rtl; 
} 
/* Code below Turns Off Number Input Spinners*/ 
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
} 
.panel-group { 
    margin: 0 auto; 
    width: 80% /* value of your choice which suits your alignment */ 
} 
#tip { 
    background-image: url(images/tip1.png); 
    height: 64px; 
    width: 260px; 
} 
#birthday { 
    background-image: url(images/birthdays1.png); 
    height: 64px; 
    width: 260px; 
} 
#whatsnew { 
    background-image: url(images/whatsnew.png); 
    height: 64px; 
    width: 260px; 
} 
#importantphones { 
    background-image: url(images/importantphones.png); 
    height: 64px; 
    width: 260px; 
} 
.turn { 
    float: right; 
} 
.lil { 
    float: right; 
} 
#chartContainer { 
width:500px; 
direction: ltr; 
} 
.buttonn{ 
margin:10px; 
} 
/*יצירת פנייה*/ 
textarea{ 
    resize:none; 
} 
.heading 
{ 
    text-align:center; 
    margin:5px; 
    font-size:15px; 
    color:blue; 
} 

#select_box 
{ 
    width:350px; 
    background-color:#819FF7; 
    padding:10px; 
    height:375px; 
    border-radius:5px; 
    box-shadow:0px 0px 10px 0px grey; 
} 
select 
{ 
    width:329px; 
    height:35px; 
    border:1px solid #BDBDBD; 
    margin-top:20px; 
    padding:2px; 
    font-size:15px; 
    color:grey; 
    border-radius:5px; 
} 


.clear { 
    clear: both; 
}

Quelle

2016-05-17 Json

Das ist nicht wirklich ein Konflikt ist ... Sie müssen nur eine Karte nach der entsprechenden Bootstrap der Größe nennen Registerkarte wurde angezeigt.

Zum Beispiel:

$('a[data-toggle="tab"]').on('shown.bs.tab', function() { 

    // Trigger a map resize 
    google.maps.event.trigger(map, 'resize'); 
});

Natürlich könnten Sie den Wähler a[data-toggle="tab"] anpassen möchten, wenn Sie die Größe ändern auslösen soll, wenn eine bestimmte Registerkarte ...

Bootstrap tab events documentation

gezeigt

Quelle

2016-05-17 17:14:17 MrUpsidown

Danke, du hast mein Problem gelöst! – Json

Kühl. Dann akzeptiere bitte die Antwort! Vielen Dank. – MrUpsidown

Greyed Div aufgrund eines Konflikts zwischen Bootsrap und Google Maps

Antwort

Verwandte Themen