【Google Map】JavascriptによるMapのコード基本
【Google Map】
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 | 地形図と植物分布に特化した地図を表示。 |
|