ホーム >> ホームページの作り方 >> Google マップをページへ貼り付ける方法

Google マップをページへ貼り付ける方法

以前のバージョンのGoogleマップは、APIキーを取得する必要がありましたが現行のバージョン(V3)では、その必要はないため、手軽に利用することができるようになりました。

また、スマートフォンにも対応し、表示速度も早くなっています。

ここではホームページにGoogleマップを表示させる手順を解説していきます。

表示したい場所の緯度と経度を取得する

まず最初に表示したい地図の緯度と経度の情報を取得します。これはGoogle Mapsのページから簡単に取得できます。

ブラウザでGoogleマップを表示して、お店や会社の所在地ところへマウスポインタをあわせて右クリックします。

すると、「この場所について」というメニューが出るのでこれをクリックします。

左上に下図のような数値が出てきます。これがポイントした場所の緯度と経度になります。

ヘッダーの設定

地図を設置したいページのヘッダーに下記のコードを挿入します。


	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(緯度,経度);
    var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

	</script>

	

(緯度,経度)のところにGoogleマップで取得した数値をいれます。この時カンマで区切るのを忘れないで下さい。

zoom: 16, のところではズームレベルを変更できます。だいたい15前後が適当と思います。

center: latlng, は地図の中心を指定しています。特に変更の必要はないでしょう。

mapTypeId: google.maps.MapTypeId.ROADMAP は地図のタイプです。ROADMAPがデフォルトの地図です。これをSATELLITEに変更すると、写真タイルになります。HYBRIDは写真タイルと主要な機能、TERRAINは物理的な起伏を示すタイルになります。

地図の配置

次にbodyタグを下記のように設定します。


	<body onload="initialize()">

	

地図を配置したい位置に下記のコードを挿入します。

このとき必ず、地図の大きさを指定してください。


	<div id="map_canvas" style="width:640px; height:480px"></div>

	

Googleマップを設置するページの文字コードは必ずutf-8にしてください。

この解説では、簡潔にするため端折っているところもあります。

さらに詳しく知りたい場合は、Google Mapチュートリアルのページをご参照ください。