JavascriptによるMapのコード基本



ブラウザ全体に、「Google Map」を表示するコード

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Page Title</title>


<script type=" text/javascript" src="http://maps.googleapis.com/maps/api/js?key=自分のAPI keyを入力&sensor=false"></script>

<script type="text/javascript">
function initialize(){

var mapDiv=document.getElementById("map_canvas");
var mapCanvas=new google.maps.Map(mapDiv,{
center:new google.maps.LatLng(35.681382,139.766084),
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
});
}

google.maps.event.addDomListener(window, "load", initialize);

</script>


<style type="text/css">
html, body, #map_canvas{
width:100%;
height:100%;
}

</style>


</head>
<body>

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

</body>
</html>




「Maps API v3」ライブラリーのロード

<script type=" text/javascript" src="http://maps.googleapis.com/maps/api/js?key=自分のAPI keyを入力&sensor=false"></script>


「window.onload」により、ページを開いた時に、実行される「initialize」関数を指定

google.maps.event.addDomListener(window, "load", initialize);
「window.onload=initialize;」でも同じ。
複数の初期化関数を指定する場合は、「addDomListener」を使う。


Mapクラス「google.maps.Map」は、地図を表示するためのクラス

var mapCanvas=new google.maps.Map(mapDiv,{
center:new google.maps.LatLng(35.681382,139.766084),
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
});

「new」演算子で、クラスのインスタンスを生成することで、「Map」クラスを利用できる。


「Map」クラスのコンストラクタ
Map(Node, Option)

Node 地図の表示したいノード
Option Mapクラスを初期化するためのオプションを指定。
省略可だが、「center」「zoom」「mapTypeId」を指定しないと、地図が表示されない。
省略した場合、「setCenter()」「setZoom()」「setMapTypeId()」で、地図の初期化オプションを指定しな蹴ればならない。

「google.maps.LatLng(latitude,longitude)」は、緯度・経度の値を、「Maps API v3」に渡すためのクラス。
latitude=経度
longitude=緯度


「google.maps.MapTypeId.地図の種類」は、地図の種類を指定するクラス。
地図の種類
ROADMAP市街地地図を表示。
SATELLITE航空写真を表示。
HYBRID航空写真+都市名・道路名などを表示。
TERRAIN地形図と植物分布に特化した地図を表示。