使用 API vs3 创建谷歌地图插件？嗨，编码员！在网上搜索了几个小时后，找不到关于将新版本 3 功能集成到 wordpress 站点的权威文章。这是我希望实现的目标......
1.) 创建一个插件，通过简单的帖子元在管理员中收集“国家名称”。2.) 地图将对国家名称进行反向地理编码，拉取该谷歌地图的适当缩放版本 3.) 向谷歌地图的管理员提供预览
所以首先，这里有一个我们想要的静态文件的工作示例：http: //simondelasalle.com/file_drop/google-map-example.htm
一切都好...将画布拉到正确的尺寸，放大它...甜美。如果你调出源代码，你会注意到我已经通过取出正文 onload 并替换为 window.onload = loadScript; 为 wordpress 集成做了一些准备。
这几乎可以工作，但确实需要一些帮助微调。
1 Admin Box Heres 用于更新国家和在管理员中预览谷歌地图的管理元框。*note 下面不包括更新字段本身的功能。
'
// 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"> </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 在头部加载必要的脚本以在管理页面中预览（为您的插件和 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。