Googleマップを設置するやり方の続き

  • 公開日 : 2012年10月3日
  • カテゴリ : Web制作

sea
では先日の記事で途中になってしまっていたGoogleマップをホームページやブログに設置するやり方の続きを説明します。

GoogleマップのAPIへのリンクや、ページ内の実際にマップを設置する箇所にdiv要素を記述することは先日の記事で既に完了しているので、そのあたりがまだできていないという方は先に済ませておいてください。

では次にテキストファイルを開き、以下のJavaScriptのコードを記述します。
とりあえずこのままコピーしておき、以降の解説を見ながら必要な部分だけ書き換えればOKだ。

function initialize() {
//地図設置
  var latlng = new google.maps.LatLng(34.911086,137.159792);
  var myOptions = {
    zoom : 14,
    center : latlng,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
google.maps.event.addDomListener(window,'load',initialize);

コードの詳細説明

では上記のコードを一つ一つ解説していこう。

var latlng = new google.maps.LatLng(34.911086,137.159792);

これはマップを表示する座標を指定して、latlngという変数に代入している。
緯度は英語でlatitude、経度はlongitudeなので、緯度と経度を表す変数にはlatlngと名付けられる場合が多いというのは別に覚える必要はない。ただの豆知識だ。

マップに表示したい場所の緯度と経度を知るにはGoogleで「緯度　経度　取得」とでも入力して検索すれば簡単に取得できる。
では次のコードに移ろう。

var myOptions = {
    zoom : 14,
    center : latlng,
    mapTypeId : google.maps.MapTypeId.ROADMAP
    };

これはマップ表示の際のオプション項目の設定をして、変数myOptionsに代入している。
このオプション項目を一つ一つ説明しよう。

zoom : 14,

というのはマップの表示範囲のことである。
数値を大きくすれば拡大、小さくすれば縮小される。
最初は15前後の数値を入れてとりあえず表示させ、それを見た後に自分の好みで微調整するのがいいのではないでしょうか。

center : latlng,

これは地図が表示された際の中央の場所を指定している。
変数latlngには表示させたい座標を最初に代入しているので、その地点を中央にして地図が表示されることになる。なのでこの項目は基本的にいじる必要はない。

mapTypeId : google.maps.MapTypeId.ROADMAP

これは地図の表示種類の指定である。
ROADMAPという記述が表示種類を表しており、先日の記事でも紹介したページ(サイト削除しました)のような表示がROADMAP(2Dの地図)である。
他にもSATELLITE(航空写真)やHYBRID(2Dと航空写真)、TERRAIN(地形)なんていう表示種類もあるので、書き換えて表示させてみるといろいろな表示を見れて楽しいかもしれない。

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

先日の記事でHTMLファイル内にmap_canvasというid属性のdiv要素を設置したと思うが、そこにmyOptionsの設定で地図を表示させますよ。という記述を変数mapに代入しているのが上記のコードである。このコードは基本的に書き変えたりする必要はない。

google.maps.event.addDomListener(window,'load',initialize);

最後のこのコードはページがロードされた際に関数initializeを実行するという記述である。
関数initializeには先ほどまでのオプション項目を基にして地図を表示させるという記述がなされているので、関数initializeを実行するタイミング(イベント)をこのコードで指定している。

HTMLファイルから読み込む

以上でこのファイルは一応完成なのでJavaScriptファイルとして保存する。(例：googlemaps.js)
そしてHTMLファイルに以下のコードを追加し、このファイルを読み込む。

このコードを書き込む箇所はすでにhead要素内またはbody要素内に書かれているGoogleマップのAPIへのリンクの下が良いだろう。(前回の記事参照)
つまり以下のようになるわけだ。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="googlemaps.js"></script>

ここでの注意点としては、この記述の順番を逆にするとマップは表示されないという点だ。
なぜならHTMLファイルは上から順に読み込まれるので、先にAPIへのリンクを読み込ませてやる必要がある。

以上でGoogleマップの設置自体は完了であるが、このままでは地図上にピンやピンをクリックした際の吹き出しなどは表示されない。
次回の記事ではピン(マーカー)の表示方法や吹き出しの表示方法あたりを解説しようと思う。

2012年10月4日追記：Googleマップのマーカーの設置方法の解説記事を書きました。

このページを見た人はこんなページも見ています