Webページ内で地図が表示される位置と地図のサイズ
Webページ内でどの位置に地図を表示するのかを設定する方法と表示される地図のサイズを設定する方法について解説します。
1.地図が表示される位置とサイズ
3.サンプルコード
4.PCとスマホでサイズを変更するサンプル
地図が表示される位置とサイズ
Google Maps APIを使ってWebページ内の任意の位置に地図を表示するには、地図を表示したい位置にdiv要素を記述しておきます。そしてWebページが読み込まれた後に実行されるスクリプトを使ってdiv要素のコンテンツを地図に置き換えることで地図を表示します。
また地図のサイズはdiv要素のサイズで設定します。style属性を使って次のように指定します。
<body>
<p>目的地までの地図はこちらです。</p>
<div id="map" style="width:500px; height:300px"></div>
<p>地図をみても分からない場合はご連絡下さい。</p>
</body>
上記の場合、テキストとテキストの間に地図が表示されることになります。地図のサイズは横幅が500px、高さが300pxになります。
スマホで閲覧した時に地図を全画面表示させたい場合には、次のように幅と高さを100%に設定して下さい。
<div id="map" style="width:100%; height:100%"></div>
Google Maps APIのドキュメントではiPhoneやAndroid端末からの閲覧を判定してサイズを振り分けるサンプルが掲載されています。
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}
あとで実際に試してみます。
サンプルコード
では簡単なサンプルを作成して実際に試してみます。
function initMap() {
var opts = {
zoom: 15,
center: new google.maps.LatLng(35.6807527,139.7670716)
};
var map = new google.maps.Map(document.getElementById("map"), opts);
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Google Maps API サンプル</title>
</head>
<body>
<p>東京駅はこちらです。</p>
<div id="map" style="width:600px; height:400px"></div>
<p>分からない場合はご連絡下さい。</p>
<script type="text/javascript" src="code1_1.js">
</script>
<script async defer
src="//maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
</script>
</body>
</html>
ブラウザでWebページを開くと次のように表示されます。
表示されている地図の大きさはdiv要素に設定している幅600px、高さ400pxになっています。
では地図のサイズだけを変更してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Google Maps API サンプル</title>
</head>
<body>
<p>東京駅はこちらです。</p>
<div id="map" style="width:300px; height:300px"></div>
<p>分からない場合はご連絡下さい。</p>
<script type="text/javascript" src="code1_1.js">
</script>
<script async defer
src="//maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
</script>
</body>
</html>
ブラウザでWebページを開くと次のように表示されます。
地図のサイズが今度は幅300px、高さ300pxで表示されました。このように地図のサイズはdiv要素に設定したサイズで調整することができます。
なお2番前のサンプルをiPhoneで表示すると次のように表示されます。
PCとスマホでサイズを変更するサンプル
今度はPCとスマホで見た場合にサイズを変更するサンプルを試してみます。
function initMap() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1){
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
}
var opts = {
zoom: 15,
center: new google.maps.LatLng(35.6807527,139.7670716)
};
var map = new google.maps.Map(mapdiv, opts);
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Google Maps API サンプル</title>
<style type="text/css">
html { height: 100% }
body { height: 100% }
</style>
</head>
<body>
<p>東京駅はこちらです。</p>
<div id="map" style="width:600px; height:400px"></div>
<p>分からない場合はご連絡下さい。</p>
<script type="text/javascript" src="code1_3.js">
</script>
<script async defer
src="//maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
</script>
</body>
</html>
PCのブラウザでWebページを開くと次のように表示されます。PCの場合は元々div要素に設定されていたサイズが地図に適用されます。
次に同じWebページをiPhoneから開くと次のように表示されます。Android端末やiPhoneからアクセスがあった場合には幅も高さも100%に設定されているので(デフォルトで設定されているマージンなどの分を除いて)画面いっぱいに表示されます。
なお次の記述がないとスマホから閲覧し幅と高さを100%に設定した時に地図が表示されませんでした。
<style type="text/css">
html { height: 100% }
body { height: 100% }
</style>
PCから閲覧した場合とスマホから閲覧した場合でサイズを分ける方法の一つとして参考にされてみて下さい。
( Written by Tatsuo Ikura )
著者 /
プログラミングや開発環境構築の解説サイトを運営しています。