Google Mapの設置方法

APIの読み込み

まず、head内にGoogle Mapを埋め込むためのAPIを読み込ませます。

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

sensorの個所は位置検知センサー(GPSなど)への対応です。位置情報機能が利用できるスマホ環境などであればtrue、通常はPCサイトの利用なのでfalseが多いと思います。

HTMLの記述

続いて、Google Mapを設置する場所をHTMLで記述します。記述したい場所にIDを付与した要素をセットします。

<div id="map_canvas"></div>

CSSの設定

上記で作成したGoogle Mapを表示する要素にCSSを適用します。widthとheightを指定しないと、領域が確保されずにGoogle Mapが表示されませんので注意しましょう。

#map_canvas {
  width: 760px;
  height: 320px;
}

javascriptコードを作成

最後に、スクリプトをheadに配置します。外部ファイルにしてもいいと思います。

<script type="text/javascript">
/* map */
function initialize() {
  var latlng = new google.maps.LatLng(35.666451, 139.756065);
  var myOptions = {
		zoom: 16,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP, //
		panControl: true, //1.左上の丸いの表示
		streetViewControl: true, //2.左の黄色い人形(pegman=ペグマン)表示
		zoomControl: true, //3.左の上下スライダー表示
		mapTypeControl: true, //4.右上の「地図/航空写真」表示
		scaleControl: false, //5.右下の定規の表示
		overviewMapControl: false //6.右下の概観マップの表示
		//disableDefaultUI: true  //全コントローラを非表示
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'ピンにマウスを乗せたときのタイトル'
  });
}
</script>

以下、解説です。

4行目:google.maps.LatLng(緯度, 経度)

Google Mapに座標を設定します。緯度経度を調べて記述します。緯度・経度の座標は以下「住所から緯度経度(座標)を取得する」から取得できます。

6行目:zoom

地図が表示された時のデフォルトの拡大サイズ。値が大きいほど拡大した状態になります。

8行目:地図の描画タイプ MapTypeId

表示させる地図のタイプを指定します。一般的にはROADMAPが利用されます。

ROADMAP デフォルトのマップタイプです。道路地図を表示します。
SATELLITE 航空写真を表示します。
HYBRID 航空写真+地名・道路名を表示します。
TERRAIN 地形を描画した地図を表示します。

9~15行目:コントローラー設定

Google Map上に表示させるコントローラーを設定します。上記コードの「1~6」は以下のコントローラーになります。trueなら表示、falseなら非表示になります。全てのコントローラーを表示させたくない場合は15行目のコメントアウトをとってください。

17行目:Google Mapを描画する場所を指定

上記の例はmap_canvasにmyOptionsの内容で描画させる指定です。特に変更する理由がない場合はこのまま利用します。

21行目:タイトル

地図上に表示させるピンにマウスを乗せた時に表示させるタイトルを指定します。

住所から緯度経度(座標)を取得する

座標を取得する場合は以下の住所を入力します。座標の位置がズレている場合は、地図上で該当個所をクリックするとその場所の座標が表示されます。

lat(緯度): Lat  lng(経度): Lng

微調整は地図をクリック。

参考リンク

本記事で紹介しているGoogle Mapの座標取得については、以下のページを参考にカスタマイズしています。本記事ではコードのについての解説は行っておりませんので、これから作られる方はどうぞ以下サイトをご参考ください。