私のHTMLページに間違ったGoogleマップのAPIの位置

Question

私は私のウェブサイト上で地図を中心にしたいときに問題があります。ここで

function initMap() { 
var myLatLng = new google.maps.LatLng(-25.363, 131.044); 

var map = new google.maps.Map(document.getElementById('map'), { 
    center: myLatLng, 
    zoom: 5 
}); 

var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    title: 'Hello World!' 
    }); 
} 

は私のHTMLです：：

<div id="popup_map"> 
    <div class="map-container"> 
     <div id="map" class="g-map"></div> 
    </div> 
</div> 

そして、ここに私のCSSです： はここに私のJSです

#popup_map { 
     width: 100%; 
     height: 100%; 
     background: rgba(0,0,0,0.7); 
     position: fixed; 
     top: 0; 
     left: 0; 
     z-index: 1050; 
     display: none; 
    } 

    .map-container { 
     width: 98%; 
     height: 90%; 
     background: white; 
     margin: 2% auto; 
    } 

    .g-map { 
     height: 100%; 
     position: relative; 
     overflow: hidden; 
    } 

マーカーは良い位置決幅であるが、マップではありませんまあまあ。 地図の中心は、マーカーにはなりませんが、代わりにそれは赤い点にある...

編集：JsFiddle

EDIT2には何の問題：マップIを表示するだけでシンプルなリンクを追加し、ここで私が使用JSは次のとおりです。

：私はそれを動作させるために、これを追加どこ

これは正確です

google.maps.event.trigger(map, 'resize'); 
map.panTo(new google.maps.LatLng(-25.363, 131.044)); 

Answer 1

マップ

google.maps.event.trigger（マップ、 'リサイズ'）をリサイズ。

必要に応じて、マップを再マップする必要があります。あなたのためにする必要があります

var reCenter = new google.maps.LatLng（lat、lng）; map.setCenter（reCenter）;