WordPressにGoogle Maps API V3！

Google Maps API ｖ3の地図をiPhone（アイフォン）やスマートフォンで見れるように表示させるには、次のメタタグとscriptタグを<header>タグ内に記述しておく必要があります。

ここで注意点です。

Google先生のデフォルトは、

<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=set_to_true_or_false“></script>

となっています。

先ず、metaタグは、とgoogle先生のページで、この地図が全画面表示であり、ユーザーがサイズ調整できないことを示しているとあります。

したがって、Wordpress内の記事にGoogle Mapを表示させるために、共通headerタグ内に上記<meta> タグと<script>を記述する場合、まずメタタグのuser-scalable を yes にしておかないとiPhone（アイフォン）画面に表示されたサイト・ブログ画面そのものが、iPhone（アイフォン）画面上をタップしたり指で拡大縮小しようとしても固定されてしまい、拡大縮小（リサイズ）出来ないことになってしまいます。

製作するサイトがPC用であれば、デフォルトのままno。

モバイル用であれば　yes とすべきでしょうか。WordPressのモバイルテーマ（WPtouch）プラグイン等を使っている場合は、モバイル画面用とPC用画面を切り替えられるので、iPhone（アイフォン）でPC画面を見るユーザーもいるでしょうから。

次に<script>タグでは、センサー(GPS等)があるデバイス（スマートフォンなど）では、sensor=true です。最近はスマートフォンが主流になってきたので、なんでもかんでも true でいいかもれません。

<meta name=”viewport” content=”initial-scale=1.0, user-scalable=yes” />

 <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=true“></script>

◆Google Maps JavaScript API V3　サンプル

• 上記メタタグ,scriptを記述したiPhone（アイフォン）用サンプル地図（マーカー数172）

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク