スポンサードリンク

Google Maps API V3の地図(マップ)をPC、スマートフォンで見れるように表示させるscriptとメタタグの設定

Google Maps API v3の地図を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 サンプル

 

◆Google Maps JavaScript API V3

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">