HOME > > > Googleマップをブラウザ全部に表示する方法

Googleマップをブラウザ全部に表示する方法

ブラウザ全体

Googleマップをブラウザいっぱいに表示する

GoogleマップをWebサイトに設置するのは、最近ではごく普通になってきています。
サイト内に埋め込む際、サイズはどれくらいでしょうか?対象範囲が広いと入りきらない時があると思います。
見えないならzoom設定を広めにしとけば?という意見もあると思いますが、結局ユーザーが大きくしたり、小さくしたりと多少手間がかかってしまいます。 また、「googleマップはこちら」というテキストリンクをつけておき解消するという手もありますが、せっかくサイトに来てもらっているので、ページ内で用意できたらいいかなとも思います。

サンプルはこちら

HTML

HTMlはbodyにマップをロードさせ、マップを読み込む要素を記述します。


<body onload="initialize();">
 <div id="map_area"></div>
</body>

Javascript

下記のスクリプトをhead内に記述します。
緯度と経度を変更するとマップの場所が変わります。
zoomの数字は小さい程マップの範囲が広く表示されます。


<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
function initialize() {
  var latlng = new google.maps.LatLng(37.4220, -122.08491731);
  var myOptions = {
    zoom: 17,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_area'), myOptions);
}
</script>

CSS

CSSでwidth、heightともに100%にします。


body{
 margin: 0;
}

html, body, #map_area{
 width: 100%;
 height: 100%;
}

設置完了

以上でGoogleマップのブラウザ全体設置が完了しました。
サイト内で表示したい時、_blankなら「window.close();」を、_selfなら「history.back」をpositionで設置しておけば丁寧感がでますね。
今回はGoogleMapAPIの簡単な設置方法ですので、これからカスタマイズ方法などご紹介していけたらと思います。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket