Googleマップのドラッグ可能なマーカーが折りたたみクラスのブートストラップで機能しない

Googleマップのドラッグ可能なマーカーを折りたたみクラスのブートストラップ内に配置したいが、動作しない。地図を崩壊クラスの外に置いてもうまくいけば、崩壊クラスの中にマップを置くと問題が発生します。Googleマップのドラッグ可能なマーカーが折りたたみクラスのブートストラップで機能しない

これは、HTMLコードです：

<div class="col-lg-12" > 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Input Map?</a> 
       </h4> 
      </div> 
      <div id="collapseThree" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        <!--map start--> 
        <div class="col-lg-8" > 
         <div class="form-group"> 
          <label>Map</label> 
          <div id="map" class="col-lg-8 tambah-map-canvas"></div> 
         </div> 
        </div> 
        <div class="col-lg-4"> 
         <label>Coordinat</label><br/> 
        </div> 
        <div class="col-lg-4"> 
         <div class="form-group"> 
          <label>Latitude</label> 
          <input type="text" name="lat" id="lat" class="form-control"> 
         </div> 
        </div> 
        <div class="col-lg-4"> 
         <div class="form-group"> 
          <label>Longitude</label> 
          <input type="text" name="lng" id="lng" class="form-control"> 
         </div> 
        </div> 
        <div class="col-lg-4"> 
         <div class="form-group"> 
          <input type="button" id="reset" value="Reset Location"> 
          <br/><br/> 
         </div> 
        </div> 
        <!--map end--> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

これはJavaScriptのです：

<script type="text/javascript"> 

    function updateMarkerPosition(latLng) { 
     document.getElementById('lat').value = [latLng.lat()]; 
     document.getElementById('lng').value = [latLng.lng()]; 
    } 

    var myOptions = { 
     zoom: 7, 
    scaleControl: true, 
     center: new google.maps.LatLng(-6.175500045712664,106.8272084918824), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map"), 
    myOptions); 

    var marker1 = new google.maps.Marker({ 
    position : new google.maps.LatLng(-6.175500045712664,106.8272084918824), 
    title : 'lokasi', 
    map : map, 
    draggable : true 
    }); 

    //updateMarkerPosition(latLng); 

    google.maps.event.addListener(marker1, 'drag', function() { 
     updateMarkerPosition(marker1.getPosition()); 
    }); 
</script> 

<script type="text/javascript"> 
    document.getElementById('reset').onclick= function() { 
     var field1= document.getElementById('lng'); 
     var field2= document.getElementById('lat'); 
     field1.value= field1.defaultValue; 
     field2.value= field2.defaultValue; 
    }; 
</script>

は、私が見逃してはありますか？私は間違って何をしていますか？おかげさまで

出典

2017-12-04 ytomo

より良い分析のためにJSFiddleを作成します。 – FBlade

IDが#mapのCSSは表示されませんが、特定の高さ（つまり400px）に設定されていない場合は、divを折りたたんでも表示されません。

したがって、地図の高さを固定量に設定するのが最速の解決策です。

ドラッグ可能なマーカーを持っているかどうかにかかわらず、マップは折りたたまれて読み込まれます。ここで

はサンプルです：（また、必要に応じjsbin link場合）

var map; 
 
var center = { 
 
    lat: -34.397, 
 
    lng: 150.644 
 
}; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: center, 
 
    zoom: 8 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: center, 
 
    map: map, 
 
    draggable: true 
 
    }); 
 
}

#map { 
 
    height: 400px; /* Set this to something fixed */ 
 
} 
 

 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Simple Map</title> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 
    <div id="exampleAccordion" data-children=".item"> 
 
    <div class="item"> 
 
     <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" aria-expanded="true" aria-controls="exampleAccordion1"> 
 
     Click to toggle the map 
 
    </a> 
 
     <div id="exampleAccordion1" class="collapse show" role="tabpanel"> 
 
     <div id="map"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY&callback=initMap" async defer></script> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

役に立てば幸い！

出典

2017-12-07 04:35:51 henrisycip

Googleマップのドラッグ可能なマーカーが折りたたみクラスのブートストラップで機能しない

答えて

関連する問題