API vs3 を使用して Google マップ プラグインを作成しますか? こんにちは、コーダーです！何時間も Web を精査した後、新しいバージョン 3 の機能をワードプレス サイトに統合することに関する決定的な記事を見つけることができません。これが私が達成したいと思っていることです...
1.) シンプルな投稿メタを介して管理者に「国名」を収集するプラグインを作成します。2.) 地図は国名を逆ジオコーディングし、その Google 地図の適切にズームされたバージョンを表示します 3.) Google 地図の管理者にプレビューを提供します
最初に、静的ファイルとして必要なものの実例を示します: http://simondelasalle.com/file_drop/google-map-example.htm
大丈夫です...キャンバスを正しい次元で引っ張り、ズームします...甘いです。ソースをプルアップすると、本体の onload を取り出して window.onload = loadScript; に置き換えることで、wordpress 統合のためにこれを少し準備していることに気付くでしょう。
これはほとんど機能しますが、微調整の助けが本当に必要です。
1 管理ボックス 国を更新し、管理で Google マップをプレビューするための管理メタ ボックスです。*注意 フィールド自体を更新する機能は以下に含まれていません。
'
// 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.