2013/11/19

コピペで簡単!Google Mapをサイトに表示する方法

コピペで簡単!Google Mapをサイトに表示する方法

目的地などの場所を紹介する場合,住所だけでは分かりにくいため,地図を埋め込んで分かりやすく表示させたいと思うことがあるかと思います.
そこで,Google Mapを表示する方法を紹介します.今回紹介するソースコードをほぼコピペするだけで,とても簡単に表示させることが出来ます.

目次

Google Mapとは

もはや説明不要の見ない日はないというくらい有名な地図ですね.スマートフォンやタブレット端末で位置を探す場合なんかに使用している方も多いと思います.

Google Maps APIを利用して,Web上に地図を表示することが出来,マーカーや情報ウインドウをはじめ,様々なカスタマイズを行えることから,多種多様なサービスが作られています.
今回は地図を表示し,目的地の位置にマーカーと情報ウインドウを表示させる方法を紹介します.

自サイトに地図を表示する方法

実際に以下の様な地図を表示させる方法をソースコードと共に説明していきます.

まず,HTML文の中で地図を表示させたい場所に

<div id="mapField"></div>

という要素を配置します.

そして,この要素のスタイルに

#mapField {
  width: 350px;
  height: 350px;
}

というような大きさを指定します.
大きさは任意です.この場合は350*350サイズですが,実際に使用する場合はお好きなサイズに変更していただいて構いません.

さらに,以下のようにスクリプトを読み込みます.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Google Map用のソースを読み込みんでいます.
これを読み込まないと地図が表示されませんので,必ず読み込んでください.

以上で準備が整いました.

最後に,地図を表示させるためのスクリプトを記述していきます.

function mapInit() {
	var centerPosition = new google.maps.LatLng(35.656956, 139.695518);
	var option = {
	    zoom : 18,
	    center : centerPosition,
	    mapTypeId : google.maps.MapTypeId.ROADMAP
	};
	//地図本体描画
	var googlemap = new google.maps.Map(document.getElementById("mapField"), option);
}

    mapInit();

これだけで地図が表示できるようになりますが,コードを1つずつ読み解いていきます.

上記のソースコードでは,まず

var centerPosition = new google.maps.LatLng(35.656956, 139.695518);

と記述し,地図を表示させた時に中心位置となる座標を指定し,オブジェクトとして生成します.

そして,

var option = {
	zoom : 18,  //縮尺(0に近いほど広範囲を表示)
	center : centerPosition, //地図の中心座標
	mapTypeId : google.maps.MapTypeId.ROADMAP //地図の種類を指定
};

このように,地図の外観を決めるためのオプションを指定します.
地図の種類には,通常の地図の他に,航空写真や地形図などの種類があります

最後に,

var googlemap = new google.maps.Map(document.getElementById("mapField"), option);

と記述します.
渡すパラメータには生成したいHTML上の場所とオプションを指定します.
これで,上記のHTML文を追加した位置に地図が生成されます.

マーカーと情報ウインドウの表示方法

地図だけでは紹介したい場所がわかりにくいですね.
マーカーや情報ウインドウを表示して場所をパッと見ただけで分かりやすくなるようにしてみましょう.

マーカーの追加

マーカーを生成するには,マーカーのオプションを指定する必要があります.

//マーカーオプションの指定
var markerOption = {
	position : centerPosition, //マーカーを表示させる座標
	map : googlemap,  //マーカーを表示させる地図
	title : "ホームページ制作スタイル"  //マウスオーバーした際に表示させる文字列
};

//マーカー追加
var marker = new google.maps.Marker(markerOption);

オプションを指定しながらマーカーオブジェクトを生成することで,地図上にマーカーが表示することができます.

情報ウインドウの追加

//情報ウインドウオプションの指定
	var infoWindowOption = {
	position : centerPosition,  //中心座標
	content : "ホームページ制作スタイル"  //ウインドウ内に表示する文字列
};

//情報ウインドウ追加
var infoWindow = new google.maps.InfoWindow(infoWindowOption);
infoWindow.open(googlemap);

情報ウインドウを表示させる場合も同様に,オプションを指定し,オブジェクトを生成します.
そして,オブジェクトのopen()メソッドのパラメータに地図を指定することで,情報ウインドウを表示させることが出来ます.

まとめ

上記のソースコードをコピペして,緯度経度やコメントを変更するだけで,簡単に表示できるようになります.地図を表示したい場合は是非使ってみてください.