Google MAPS JavaScript APIの単純な例
ここでは、Google MAPS JavaScript APIを使った単純な例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS JavaScript APIを使ったページのソースです。 地図の表示だけを行うという単純なものです。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
var map;
// 初期化。bodyのonloadでinit()を指定することで呼び出してます
function init() {
// (1) Google Mapで利用する初期設定用の変数
var latlng = new google.maps.LatLng(39, 138);
var opts = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
};
// (2) Mapオブジェクトの生成
// getElementById("map")の"map"は、body内の<div id="map">より
map = new google.maps.Map(document.getElementById("map"), opts);
}
//]]>
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
以下、コードの解説です。
styleタグでのcss設定
上記サンプルでは、head内にstyleタグを利用してcssの設定を行っています。 このようにcssを必ず入れなければならないわけではありませんが、height(高さ)の設定を行わないと、高さが0となってしまい何も表示されない場合があるので、入れています。
cssそのものの設定は別途他のサイトを参考にして下さい。
表示されるGoogle Mapの初期値を設定する
サンプルプログラムの(2)部分で、google.maps.Map()コンストラクタを利用してMapクラスのオブジェクトを生成しています。 google.maps.Map()コンストラクタの第一引数は、Google Mapを表示するHTMLコンテナ(通常はDIV要素)です。
google.maps.Map()コンストラクタの第二引数は、各種設定項目が含まれるオブジェクトを渡します。 第二引数は必須ではないので、省略することも可能です。
サンプルプログラムでは、(1)の部分で、google.maps.Map()コンストラクタに渡す第二引数部分を作成しています。
// (1) Google Mapで利用する初期設定用の変数
var latlng = new google.maps.LatLng(39, 138);
var opts = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
};
zoomは、地図のズームを表現しています。 最小値0は世界地図全体を表示します。 値が大きいほどズームが大きくなります。
mapTypeIdは、地図の種類を表します。 このサンプルでは市街地図を表示するROADMAPを利用しています。 以下のMapTypeIdが用意されています。
| HYBRID | 衛星写真/航空写真と道路地図のハイブリッド |
|---|---|
| ROADMAP | 市街地図 |
| SATELLITE | 衛星写真や航空写真 |
| TERRAIN | 地形や樹木などの地形的特徴を持つ地図 |
centerは、地図の中心座標を設定するための項目です。 centerには、LatLngクラスのオブジェクトを設定します。 LatLngクラスのオブジェクトは、google.maps.LatLng()コンストラクタで生成します。
scriptタグで行っている処理の説明
version 2までは「API key」というものの取得が必要でしたが、Version 3からは不必要になりました。 代わりに、sensorに対して「true」もしくは「false」を入れることが必須となりました。 sensorは、ユーザの位置情報をGPSなど(WiFiの基地局情報から取得する場合もあります)の装置から取得してGoogleのサーバへ送信するかどうかを設定するための変数で、「true」にすると位置情報を扱えるようになります。 このサンプルでは、位置情報を扱わないので「false」としてあります。
「charset="UTF-8"」の部分は文字コードとしてUTF-8を利用していることを宣言しています。 Google MAPS JavaScript APIを利用するWebページは、必ずUTF-8で記述するようにしましょう。 ただ、どうしてもSJIS、EUC、JISなど、UTF-8ではない文字コードでWeb本文を書きたい場合には、Google MAPS JavaScript APIを利用する部分をUTF-8で別ページファイルで作成し、iframeを利用して読み込むのが良いでしょう。 下記iframeサンプルの「ファイル名.html」というファイルに、上記Google MAPS JavaScript APIサンプルのようなHTMLを作れば大丈夫だと思われます。
<iframe src="ファイル名.html"></iframe>
表示例
iframe経由の表示例です。
次のステップ
