Codeigniter Biostall谷歌地圖API上的標籤問題

Question

我試了很多在我的標籤名稱地圖上顯示谷歌地圖。但它只顯示空白灰色框，並且沒有顯示地圖。但是當我直接在頁面上使用它時，它工作正常。我知道resize()函數存在一些問題。請給我一個解決方案我如何解決這個問題使用Biostall Library。下面給出了我的代碼。

這是我的控制器代碼：

$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。

2. 已生成API密鑰從以下鏈接谷歌： https://developers.google.com/maps/documentation/javascript/get-api-key 尋找在Googlemaps.php var $apiKey= ''，把你新生成的API密鑰 那裏。

3. 請同時讓你在你的開始控制器功能$this->load->library('googlemaps');，包括你的庫，因爲目前我無法找到它當前的控制器代碼。 PS：請確保你已經在自動載入中包含了你的url helper，如果你沒有像在示例代碼中那樣加載它的話。

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); 

你的觀點似乎罰款。

如果您仍然需要任何澄清，請不要猶豫，問。