Codeigniter Biostall GoogleマップAPI on tab issue

Question

私は、タブマップのマップにGoogleマップを表示するために多くを試みました。しかし、空白の灰色のボックスのみを表示しており、地図は表示されません。しかし、私はそれをページ上で直接使用しているときにうまくいきます。 resize()機能に問題があることを知っています。 Biostallライブラリを使用して解決方法を教えてください。私は以下のコードを与えました。

これは私のコントローラコードです：

$config['center'] = '37.4419, -122.1419'; 
$config['zoom'] = "18"; 
$this->googlemaps->initialize($config); 
// Get the co-ordinates from the database using our model 
//$coords = $this->map_model->get_coordinates(); 
// Loop through the coordinates we obtained above and add them to the map 
$marker = array(); 
$marker['position'] = '37.4419, -122.1419'; 
$marker['infowindow_content'] = '1600 Amphitheatre Parkway in Mountain View, Santa Clara County, California'; 
$marker['icon'] = base_url('assets/img/map-ico.png'); 
$this->googlemaps->add_marker($marker); 
// Create the map 
$data['map'] = $this->googlemaps->create_map(); 

これは私の見解コード

<div class="tab-pane fade" id="map"> 
    <div class=""> 
    <?php echo $map['js']; ?> 
    <?php echo $map['html']; ?> 
    </div> 
</div> 

以下にチェックして、あなたはそれに関するいかなるより多くの情報が必要な場合は私に知らせてください。

あなたの回答を待っています。ありがとうございました

Answer 1

更新日： 次のビューを使用して、タブペインの問題を解決してください。結果：http://prntscr.com/g6gu6s

<?=$map['js'];?> 
<script> 
$(document).ready(function() { 
    $('.container').on('shown.bs.tab',function() 
    {google.maps.event.trigger(window,'resize',{});}) 
    }); 
</script> 

<div class="container"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#map" id="mapTab" >Map</a></li> 
    </ul> 
    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    </div> 
    <div id="map" class="tab-pane fade"> 
     <?=$map['html'] ?> 
    </div> 
    </div> 
</div> 

---

前の回答： 次の各手順を完了持っていることを確認してください。

1. 置きCIでのご application/librariesフォルダの両方Googlemaps.phpとJsmin.php。 https://developers.google.com/maps/documentation/javascript/get-api-key var $apiKey= ''を探しGooglemaps.phpでと新しく生成されたAPIキーが を置く：

2. は、Googleのリンクを以下からAPIキーを生成しました。

3. コントローラの機能の初めにライブラリを含めてください。$this->load->library('googlemaps');も現在のコントローラコードは見つかりません。 PS：サンプルコードのようにロードしないと、あなたもurlヘルパーをautoloadに含めてください。

4. あなたのコントローラに続いて試してみてください最後 $this->load->view('jsmap', $data);

上だけでなく、あなたのビューにデータを渡す：あなたのビューは罰金だ

$this->load->library('googlemaps'); 
    $this->load->helper('url'); 
    $config['center'] = '37.4419, -122.1419'; 
    $config['zoom'] = "18"; 
    $this->googlemaps->initialize($config); 
    // Get the co-ordinates from the database using our model 
    //$coords = $this->map_model->get_coordinates(); 
    // Loop through the coordinates we obtained above and add them to the map 
    $marker = array(); 
    $marker['position'] = '37.4419, -122.1419'; 
    $marker['infowindow_content'] = '1600 Amphitheatre Parkway in Mountain View, Santa Clara County, California'; 
    $marker['icon'] = site_url('assets/img/map-ico.png'); 
    $this->googlemaps->add_marker($marker); 
    // Create the map 
    $data['map'] = $this->googlemaps->create_map(); 

    $this->load->view('jsmap', $data); 

。それでも依頼することを躊躇しない任意の明確化が必要な場合は

。