將Google Maps API vs3集成到Wordpress插件中？ - 如此接近

Question

使用API​​ vs3創建Google Maps插件？你好，編碼器！在網上搜索幾個小時後，找不到將新版本3功能集成到WordPress網站的權威性文章。這是我希望實現的目標...

1.）創建一個插件，通過簡單的帖子meta在管理中收集「國家名稱」。 2）該地圖將反向地理國名普林起來，谷歌地圖 3）的適當放大版本提供預覽到谷歌地圖的管理

所以第一關中，我們繼承人的工作示例想要成爲一個靜態文件： http://simondelasalle.com/file_drop/google-map-example.htm

所有不錯的...拉動畫布在正確的尺寸，放大...甜。如果你拉起源代碼，你會注意到我已經爲wordpress集成做好了準備，通過取出正文onload並替換爲window.onload = loadScript;

這幾乎可行，但真的需要一些幫助微調。

1 Admin Box 繼承人管理員元框用於更新國家和預覽管理中的谷歌地圖。 *注意下面不包括用於更新字段本身的功能。

'

// add meta box 
add_action('add_meta_boxes', 'post_map'); 

// add meta box to post type 
function post_map() { 
    add_meta_box( 
     'post_map_tab', 
     __('Map', 'post_textdomain'), 
     'map_tab_box', 
     'post' 
    ); 
} 

// print box content 
function map_tab_box($post) { 
    // Use nonce for verification 
    // wp_nonce_field(plugin_basename(__FILE__), 'post_map_noncename'); 
    // The actual fields for data entry 
    ?> 
    <table border="0" align="center" cellpadding="5" cellspacing="0" class="customfieldtable"> 

     <tr> 
     <td align="right">Country or Region<br /> 
    (This is to GeoCode Map the location using Google)</td> 
     <td><input name="geoecode_country" type="text" value="<?php echo get_post_meta($post->ID, 'geoecode_country', true); ?>" size="30" /></td> 
     <td rowspan="3">&nbsp;</td> 
     <td width="400" rowspan="4" valign="top"> 
     Please enter country and update to preview Google Map 
     <div id="mapcanvas" sty></div> 
     </tr> 

    </table> 

    <?php 
} 

'

2添加風格融插件CSS

`

#map_canvas { 
    width: 400px; 
    height: 400px; 
} 

`

3加載在該neccesary腳本頭部預覽管理頁面（爲您的插件和API密鑰自定義佔位符）。這是勾搭成admin_head，所以我們可以用動態值

「

function print_google_map_script() { 

     // we could load conditionally by page if we want here 
     global $post; 
      $geoecode_country = get_post_meta($post->ID, 'geoecode_country', true); 
     ?> 

     <script type='text/javascript'> 

       var geocoder; 
       var map; 
       var query = '<?php echo $geoecode_country; ?>'; 
       function initialize() { 
       geocoder = new google.maps.Geocoder(); 
       var mapOptions = { 
        zoom:3, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
       codeAddress(); 
       } 

       function codeAddress() { 
       var address = query; 
       geocoder.geocode({ 'address': address}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        var marker = new google.maps.Marker({ 
         map: map, 
         position: results[0].geometry.location 
        }); 
        } else { 
        alert('Geocode was not successful for the following reason: ' + status); 
        } 
       }); 
       } 

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

       window.onload = loadScript; 

     </script> 
     <?php 

    } 

    add_action('admin_head', 'print_google_map_script'); 

」

如此接近的工作，是很痛苦的更換。所以地圖加載了一個...如果你坐在那裏刷新幾次，它似乎最終工作。但是，當您第一次加載編輯帖子頁面時，您會在畫布內部碾碎地圖以及不正確的縮放級別。這裏是一個屏幕： http://www.simondelasalle.com/file_drop/screen.jpg

也許腳本加載的方式？似乎不像API正在識別畫布寬度。

任何建議或意見，你可以提供將不勝感激

謝謝！

S.

Answer 1

的問題是，所述metabox被添加到頁面並顯示（並因此給定的寬度/高度）地圖已經引起後。你需要告訴地圖刷新一次頁面加載：

$(window).load(function() { 
    google.maps.event.trigger(map, "resize"); 
}); 

更糟的是，一個metabox可以由用戶隱藏，然後發現以後;例如，他們可能會在編輯一個頁面/帖子時隱藏metabox，然後在編輯另一個時顯示它。幸運的是，WP提供了一個鉤子，讓你知道什麼時候顯示metabox，所以你也可以處理：

postboxes.pbshow = function() { 
    google.maps.event.trigger(map, "resize"); 
};