指定した緯度・経度のMapを表示する
錦糸町駅の緯度・経度（35.696802,139.814136）を中心して、上のように Google Map のロードマップを表示の仕方を説明します。
ソースコード
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Map1 | Development of Android apps by HTML5 and Javascript</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true">
</script>
</head>
<body onLoad="createMap()">
<script type="text/javascript">
//地図を作成する
function createMap() {
//錦糸町駅の緯度・経度
var position = new google.maps.LatLng(35.696802,139.814136);
//地図を作成
var options = {
zoom: 15,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map1 = new google.maps.Map(document.getElementById('map1'), options);
//マーカーの作成
var marker = new google.maps.Marker({
position: position,
map: map1
});
}
</script>
</body>
</html>
ソースの解説
HTML 部分
<!doctype html>
HTML5 として宣言します。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true">
Google Maps API JavaScript を読み込みます。
アプリケーションがユーザー位置情報の取得にセンサーを使用するかどうかを示すための sensor パラメータを設定する必要があります。位置情報を得ることのできる端末であれば true に、できない端末のときは false に設定します。ここではあまり重要ではないので、true としています。
<body onLoad="createMap()">
ページを開いたときに createMap() という関数を実行します。
JavaScript 部分
//錦糸町駅の緯度・経度 var position = new google.maps.LatLng(35.696802,139.814136);
ここからは createMap() の中身を説明します。
まずLatLngオブジェクトを作成します。これは位置の情報を管理するオブジェクトで、上記のように作成します。
google.maps.LatLng(緯度,経度);
引数の順番は上のように、(緯度,経度)となっています。この緯度・経度をデバイスのGPSから取得するようにすれば現在値を表示することができます。
マップ表示の仕方を決める
//地図を作成
var options = {
zoom: 15,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
オプション設定の配列を準備します。マップを作成する際に、マップに縮尺、地図に中央はどこか？など様々な要素を設定することができます。これを配列として準備しておきます。zoom は縮尺、center は地図の中央で設定します。（ここでは先ほどの緯度・経度を代入しています。）詳しくは下記のリンクを参照してください。
コントロール - Google Maps JavaScript API v3 — Google Developers
MapTypeId.ROADMAP の部分では、道路地図を表示しています。MapTypeId.SATELLITE とすれば、Google Earth の衛星写真を表示します。他にも様々なマップのタイプがありますので、下記リンクで確認してください。
マップ タイプ - Google Maps JavaScript API v3 — Google Developers
マップ作成
var map1 = new google.maps.Map(document.getElementById('map1'), options);
実際にマップを作成します。これには、google.maps.Map というオブジェクトを用います。作成の際は、下記のように引数を渡します。
new google.maps.Map( 表示するDOMエレメント , オプション設定の配列 )
第１引数で指定したエレメントに自動的に表示されます。（特別な場合を除いて、document.getElementById などで取得したものをそのまま渡します。）
//マーカーの作成
var marker = new google.maps.Marker({
position: position,
map: map1
マーカーを作成する部分です。マーカーを作成する position と対象とする map を配列として与えます。map の方は省略することも可能です。下記リンクも参考にしてください。
オーバーレイ - Google Maps JavaScript API v3 — Google Developers
実際にマップを表示する
<div id="map1" style="width: 320px; height: 240px;"></div>
実際に HTML でマップを表示します。サイズはここで指定します。