グーグルマップの画面内に「地図」「航空写真」を切り替えるボタンがありますが、それと同じようなボタンを設置して、容易にブログに埋め込んだグーグルマップの全画面化を可能にする方法です。
＜通常時表示＞
「Full Screen」 ボタンが地図右上に表示されている
＜全画面時＞
「Exit full screen」 ボタンが表示されて、元のサイズに戻れる
1.設置方法
1-1. FullScreenControl.js ファイルの設置
このサイトのページの上部にダウンロードできるURLがあります。自分のサーバへアップロード。 <head></head>内に記述する.
<script type="text/javascript" src="・・/js/FullScreenControl.js"></script>
1-2. 標準マップのソースに1行追加
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(new FullScreenControl(map));
この標準ソースの場合、下記のように追記するだけ（赤字）。
<script type=”text/javascript”>
//<![CDATA[
var center = new google.maps.LatLng(35.68407, 139.63623);
var zoom = 10;
var mapTypeId = google.maps.MapTypeId.ROADMAP
var map;
function initialize()
{
var myOptions =
{
・・・・・・・・・・・・・・・
};
map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(new FullScreenControl(map));
}
window.onload=initialize;
//]]>
</script>
2.サンプル地図
全画面フルスクリーン表示を切り替えるボタンを地図内に実装する
3.参照先
doogal.co.uk – Postcodes, maps and code
関連記事一覧
ストリートビュー地図（マップコネクト）の外にペグマンの表示位置を切り替えるボタンを設置する
地図内にマップをフルスクリーンで表示できるアイコンを設置する。
Googel Maps API 全画面表示のスタイルシート（CSS）設定
Googel Maps API + Traffic Layer（交通渋滞情報レイヤー） +ON/OFFボタン ／JQtouch
Google Maps APIの全画面表示スタイルシート フルスクリーン高さ100％の指定
画面左上部のclass ”back” button(バックボタン)が target=”_webapp”の場合に正常に動作しない問題（不具合）／jQtouch - マーカー（アイコン）をクリックして、そのマーカーを消す
地図をクリックして、マーカー（アイコン）を追加／全てのマーカー（アイコン）を一括で削除する方法
スポンサードリンク
1 Comments.