地図の表示位置とサイズ

広告

Webページ内でどの位置に地図を表示するのかを設定する方法と表示される地図のサイズを設定する方法について解説します。

1.地図が表示される位置
2.地図のサイズ
3.サンプルコード
4.PCとスマホでサイズを変更するサンプル

地図が表示される位置

Google Maps APIを使ってWebページ内の任意の位置に地図を表示するには、地図を表示したい位置にdiv要素を記述しておきます。そしてWebページが読み込まれた後に実行されるスクリプトを使ってdiv要素のコンテンツを地図に置き換えることで地図を表示します。

例えば次のように記述します。 

<body>
  <p>目的地までの地図はこちらです。</p>

  <div id="map_canvas" style="width:500px; height:300px"></div>

  <p>地図をみても分からない場合はご連絡下さい。</p>
</body>

上記の場合、テキストとテキストの間に地図が表示されることになります。

スクリプトからどのdiv要素を地図に置き換えればいいのか指定ができるように、地図用のdiv要素にはid属性を設定して下さい。

地図のサイズ

表示される地図のサイズはGoogle Maps APIを使ったスクリプトで設定するのではなくdiv要素のサイズで調整します。例えば幅500px、高さ300pxの地図を表示するにはdiv要素に対してstyle属性を使って次のように指定します。 

<body>
  <p>目的地までの地図はこちらです。</p>

  <div id="map_canvas" style="width:500px; height:300px"></div>

  <p>地図をみても分からない場合はご連絡下さい。</p>
</body>

上記の場合ですとdiv要素の幅が500ピクセルで高さが300ピクセルに設定されています。その為、地図のサイズも同じく幅が500ピクセルで高さが300ピクセルとなります。

なおAndroidなどのスマホで閲覧した時に全画面表示させたい場合には、次のように幅と高さを100%に設定して下さい。 

<body>

  <div id="map_canvas" style="width:100%; height:100%"></div>

</body>

またGoogle Maps APIのドキュメントではPCから閲覧しているのかそれともスマホなどから閲覧しているのかを判定してサイズを振り分けるサンプルが掲載されています。 

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");

  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';
  }
}

この場合、iPhoneまたはAndroidの端末から閲覧された場合は幅と高さを100%に設定し、それ以外の場合は幅を600px、高さを800pxに設定されます。この後で出てくるサンプルで実際に試しています。

サンプルコード

では簡単なサンプルを作成して実際に試してみます。 

function initialize() {
  var latlng = new google.maps.LatLng(35.539001,134.228468);
  var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"<
<html xmlns="http://www.w3.org/1999/xhtml"<
  <head<
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /<
    <meta name="robots" content="noindex,nofollow,noarchive" /<
    <title<Google Maps サンプル</title<

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false"<
    </script<

    <script src="./js/code1_1.js" type="text/javascript"<</script<

  </head<
  <body onload="initialize()"<
    <p<自宅の地図です。</p<

    <div id="map_canvas" style="width:500px; height:300px"<</div<

  </body<
</html<

ブラウザでWebページを開くと次のように表示されます。

p1-1

表示されている地図の大きさはdiv要素に設定している幅500px、高さ300pxになっています。

ではスクリプトのは同じままで、div要素のサイズを変更した別のサンプルを試してみます。 

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"<
<html xmlns="http://www.w3.org/1999/xhtml"<
  <head<
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /<
    <meta name="robots" content="noindex,nofollow,noarchive" /<
    <title<Google Maps サンプル</title<

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false"<
    </script<

    <script src="./js/code1_1.js" type="text/javascript"<</script<

  </head<
  <body onload="initialize()"<
    <p<自宅の地図です。</p<

    <div id="map_canvas" style="width:300px; height:300px"<</div<

  </body<
</html<

ブラウザでWebページを開くと次のように表示されます。

p1-2

今回のサンプルではdiv要素の幅が300pxに設定されているので、表示された地図の幅も300pxで表示されています。

なお2番前のサンプルをAndroid端末で閲覧すると次のように表示されます。サイズが指定されているため、あまり望ましい形で表示はされていません。

p1-3

PCとスマホでサイズを変更するサンプル

今度はPCとスマホで見た場合にサイズを変更するサンプルを試してみます。 

function initialize() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");

  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '500px';
    mapdiv.style.height = '250px';
  }

  var latlng = new google.maps.LatLng(35.539001,134.228468);
  var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(mapdiv, opts);
}

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"<
<html xmlns="http://www.w3.org/1999/xhtml"<
  <head<
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /<
    <meta name="robots" content="noindex,nofollow,noarchive" /<
    <title<Google Maps サンプル</title<

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=(APIキー)&sensor=false"<
    </script<

    <script src="./js/code1_3.js" type="text/javascript"<</script<

  </head<
  <body onload="initialize()"<

    <div id="map_canvas" style="width:500px; height:400px"<</div<

  </body<
</html<

PCのブラウザでWebページを開くと次のように表示されます。

p1-4

div要素では高さが400pxと設定してありますが、実行されたスクリプトによってAndroid及びiPhone以外からアクセスがあった場合には高さが250pxに設定されているため表示されている地図の高さも250pxとなっています。

次に同じWebページをAndroidから開くと次のように表示されます。

p1-5

Android及びiPhone以外からアクセスがあった場合には幅も高さも100%に設定されているため画面いっぱいに地図が表示されています。

Webページを閲覧する端末に合わせてサイズを変更させたい場合にはこのサンプルのようにUser Agentを判別してdiv要素の幅及び高さを設定してみて下さい。

( Written by Tatsuo Ikura )