Google Maps Anywhere FAQ

初出日: 2008年11月13日 | 最終更新日: 2011年1月24日
投稿者: をかもと | パーマリンク

Google Maps Anywhere に関する「よくある質問と答え」です。

Q1 : プラグインを有効にしても動作していないようなのですが…

A1 : お使いのテーマの以下のところをご確認ください。

ヘッダー（header.php）
<head> ～ </head> の間に <?php wp_head(); ?> と言う記述があること。
無ければ、</head> の直前に <?php wp_head(); ?> と言う行を追加してください。

フッター (footer.php)
</body> の前に <?php wp_footer(); ?> と言う記述があること。
無ければ、</body> の直前に <?php wp_footer(); ?> と言う行を追加してください。

単一記事の投稿(single.php)、ページテンプレート(page.php)
<?php get_header(); ?> と言う記述があること。
無いようなら、最初の行に <?php get_header(); ?> を追加してください。(このテンプレートタグを書き込んだ所に ヘッダー (header.php) の内容が読み込まれます。)
ただし、<!DOCTYPE ～> <html> <head> で開始している場合は、</head> の直前に <?php wp_head(); ?> と言う行を追加してください。

<?php get_footer(); ?> と言う記述があること。
無いようなら、最後の行に <?php get_footer(); ?> を追加してください。(このテンプレートタグを書き込んだ所に フッター (footer.php) の内容が読み込まれます。)
ただし、</body> </html> で終了している場合は、</body> の直前に <?php wp_footer(); ?> と言う行を追加してください。

Q2 : エントリ中の Google Map の枠内に地図が表示されず、グレーの背景のみが表示されます。

A2 : スタイルシートの記述が影響している可能性があります。
具体的には、以下のように img 要素の max-width プロパティを設定している場合は、そのような状態になります。
img {
 max-width:100%;
}
これを回避するには、スタイルシートの最下行に以下の記述を付け加えてください。

div.googlemaps img {
 max-width:none;
}

また、以下のように div 要素の overflow プロパティを hidden に設定している場合にも、そのような状態になります。
div {
 overflow:hidden;
}
これを回避するには、スタイルシートの最下行に以下の記述を付け加えてください。

div.googlemaps div {
 overflow:visible;
}

Q3 : エントリ中の Google Map のマーカーが表示されません。

A3 : スタイルシートの記述が影響している可能性があります。
具体的には、以下のように img 要素の background-color プロパティを設定している場合は、そのような状態になります。
img {
 background-color:#FFF;
}
これを回避するには、スタイルシートの最下行に以下の記述を付け加えてください。

div.each_map img, div.googlemaps img {
 background-color:transparent;
}

Q4 : IE6でだけ、正常に動作しないのですが…

A4 : IE6のバグに起因するものかも知れません。
IE6 では <!DOCTYPE ～> 宣言の前に何か文字があると「後方互換モード」で画面をレンダリングします。
これは、<?xml version="1.0" encoding="UTF-8"?> と言う XML 宣言も例外ではありません。
なので、ヘッダー（header.php) の1行目で XML 宣言をしている場合、以下のように修正して IE6 の場合は XML 宣言を出力しないように修正する必要があります。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if(!(ereg("Windows",$ua)>0 && ereg("MSIE 6.",$ua)>0)){
echo '<?xml version="1.0" encoding="'.get_bloginfo('charset').'" ?>';
}
?>

Q5 : Prototype.js または mootools.js などのライブラリと併用しようとすると JavaScript エラーが発生します。

A5 : Google Maps Anywhere が使用している jQuery.js が、Prototype.js　または mootools.js とコンフリクト(競合)を起こして JavaScript エラーが発生しているのかもしれません。
<head> 部で JavaScript をロードする際に
Prototype.js → jQuery.js → mootools.js
の順でロードするように修正する必要があります。
また、jQuery.js ロード直後に、以下の３行を追加する必要があります。

<script type="text/javascript">//<![CDATA[
jQuery.noConflict();
//]]></script>

Q6 : クリック後に表示されるGoogleマップの言語を英語に変えるにはどうすればいいですか？

A6 : 以下の手順で設定を変更してください。

  1. “Google Maps Anywhere” ver.1.1.0 以降のバージョンに更新してください。
  2. WordPress の管理画面から [設定] - [Google Maps Anywhere] を選択してください。
  3. “GoogleマップのURL” 欄に “http://www.google.com/maps”と入力して “設定を更新する” をクリックしてください。 (他の言語の場合は? 例：ドイツ語 “http://www.google.de/maps”)

Q7 : 携帯表示用にサイズを指定することはできるのでしょうか？

A7 : KtaiStyle で表示する際の地図のサイズは、デフォルトでは幅128px, 高さ80pxになります。

これを変更するには wp-config.php に、以下のコードを追加してください。

define('GM_ANYWHERE_MOBILE_WIDTH', 192);
define(’GM_ANYWHERE_MOBILE_HEIGHT’, 120);

定数 GM_ANYWHERE_MOBILE_WIDTH は幅。GM_ANYWHERE_MOBILE_HEIGHT は高さをセットします。
このように指定することで KtaiStyle で表示する際の地図のサイズが幅192px、高さ120pxになります。

すべての地図が一律で、このサイズで表示されます。
携帯表示時は個別に地図のサイズを変更することはできません。