いろんな物が出ているが、レスポンシブルするといっても縮小するわけではなく、トリミングされる。 内包するコンテナをwidth: 100%; text-align: center; とする。マーカー複数ある場合、ふかんでみて全部入るSTART_ZOOM値に設定しなければマーカー切れてしまう。
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/gmap.js”></script> <script type=”text/javascript”> function initialize(id){gmap_initialize(id);var data = new Array(); data.push({position: new google.maps.LatLng(36.6919133,136.9852728), title: ‘チャンスメーカー本社’, content: ‘チャンスメーカー本社 <br/>高岡市戸出市野瀬790番地’}); data.push({position: new google.maps.LatLng(36.656766, 137.240868), title: ‘富山事務所’, content: ‘富山事務所 <br/>富山県富山市本郷30番地6’}); data.push({position: new google.maps.LatLng(36.720227,136.981774), title: ‘製作部’, content: ‘製作部 <br/>富山県高岡市辻73-2’}); setMarkerData(data); } </script>
<script language=’JavaScript’> window.onload=function(){initialize(‘gmap_canvas’)} </script> <div id=”gmap_canvas”> </div>
↓desktop/webコンテンツツール/gmap.v3.jsにある。
■gmap.v3.js
これ使えば大丈夫。new-chance/profileで実装中 複数マーカー設置する際に使用。緯度経度の設定あり。
http://arayu.jp/googlemap.html gmap.v3.jsには以下の機能が盛り込まれております。
- すごく簡単に設置できる
- divにclassをつけて座標を指定するだけ！本当にそれだけ！！
- スマホにも対応
- Mobile用のフラグをつけてるからモバイル時にサイズを指定した値に変更できるゾ！もちろんiPhoneでも動くし！
- 複数のマーカーに対応
- 好きなだけマーカーを置いてください。好きなように置けばいいじゃない。
- http://www.synck.com/contents/download/javascript/gmap.v3.js.html
- ■iframeを使った方法の場合
- Google Mapよりウェブサイトへの地図埋め込み用 HTML コードを取得すると<iframe width=”425″ height=”350″ frameborder=”0″・・・みたいなコードを取得することが出来ます。この取得したコードのwidth=”425″をwidth=”100%” に書き換えるでけです。 参照 ※マップの大きさがデバイスによって縮小されるのではなく、widthがちょうどよい大きさにカットされるようなイメージだ
マップをセンターで表示させるには text-align: center; とする
※このときに下記の
下記リンク先の”コピペでOK！GoogleMapをレスポンシブ対応させる方法”
の箇所の通りひと記述する必要あり。