1. まとめトップ

Webアプリ入門(HTML5+JavaScript) 4章Google Maps

Google Maps APIの「http://maps.google.com/maps/api/js」を読み込むことで簡単にGoogle Mapsを表示し、制御することができます。

更新日: 2016年06月06日

2 お気に入り 1524 view
お気に入り追加

この記事は私がまとめました

カサイ.ソフトウエアラボ 電子書籍サイト(http://kasailab.jp/)について

カサイ.ソフトウエアラボでは、コンピュータ言語の研究と教育を行っています。 今まで技術評論社、ナツメ社より紙媒体での書籍を多数出版してまいりましたが、今後電子書籍の需要が高まることを考えこのサイトを立ち上げました。 紙媒体の書籍はもちろん重要ですが、電子書籍にも大きな魅力があります。

紙媒体では頁数に制約がありますが、電子書籍にはありません。最近のプログラム言語は機能が高いため内容が盛りだくさんになります。この点電子書籍では書きたい内容を省略することなくすべて網羅できます。
技術革新のスピードが速いため、執筆から出版までのタイムラグが少なくタイムリーな内容をお届けできます。
電子書籍に掲載されているサンプルリストをコピペするだけで簡単に結果の確認ができます。

コンピュータ言語は用途に応じて各種ありますが、Android,iPhone/iPadなどのタブレット端末向けのWeb系言語を中心に逐次電子書籍化していく予定です。

電子書籍の販売方法

ここで紹介している電子書籍(pdf版)はダウンロード販売の日本最大級マーケットプレイス「DLmarket」(http://www.dlmarket.jp/)から購入してください。
カテゴリは「学習・教育・資格」-「学術・科学」-「電気・通信」に登録されています。
DLmarketのHOME画面の「カテゴリー一覧」から「学習・教育・資格」-「学術・科学」を選択してください。 そこで見つからなければ「絞り込み検索」から「電気・通信」を選択してください。

4章 Google Maps

Google Maps APIの「http://maps.google.com/maps/api/js」を読み込むことで簡単にGoogle Mapsを表示し、制御することができます。通常のロードマップや航空写真を表示することができます。地図の表示位置を移動したり、ズームを変えたりなどの操作ができます。マップに独自のイベントリスナーを付けることができます。マーカーや吹き出しを付けることもでます。地図の上にサークル、ポリライン、ポリゴンなどの図形を重ね合わせることもできます。

4-1 最もシンプルな地図の表示

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
function dispMap(){
// マップ表示領域の取得
var obj=document.getElementById("map");

// マップ作成
var latlng = new google.maps.LatLng(35.681099,139.767084); // 東京駅
var options = {
zoom: 16, // ズーム
center: latlng, // 中心
mapTypeId: google.maps.MapTypeId.ROADMAP // 地図の種類
};
map = new google.maps.Map(obj,options);
}
</script>
</head>
<body onLoad="dispMap()">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>

4-2 地図の移動メソッド

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
function dispMap(){
var obj=document.getElementById("map");

// マップ作成
var latlng = new google.maps.LatLng(35.681099,139.767084); // 東京駅
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(obj,options);
}
function move(x,y)
{
map.panBy(x, y);
}
</script>
</head>
<body onLoad="dispMap()">
<input type="button" value="←" onclick="move(-20,0)">
<input type="button" value="↑" onclick="move(0,-20)">
<input type="button" value="↓" onclick="move(0,20)">
<input type="button" value="→" onclick="move(20,0)">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>

4-3 マップにイベントリスナーを付ける

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
function dispMap(){
var obj=document.getElementById("map");
// マップ作成
var latlng = new google.maps.LatLng(35.681099,139.767084); // 東京駅
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(obj,options);
google.maps.event.addListener(map, "click", function(event) {
map.setCenter(event.latLng);
});
}
</script>
</head>
<body onLoad="dispMap()">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>

4-4 ズーム処理

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var zoom=16;
function dispMap(){
var obj=document.getElementById("map");
// マップ作成
var latlng = new google.maps.LatLng(35.681099,139.767084); // 東京駅
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(obj,options);
}
function zoomUp(){
if (zoom<21)
zoom++;
map.setZoom(zoom);
}
function zoomDown(){
if (zoom>1)
zoom--;
map.setZoom(zoom);
}
</script>
</head>
<body onLoad="dispMap()">
<input type="button" value="+" onClick="zoomUp()">
<input type="button" value="-" onClick="zoomDown()"><br />
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>

4-5 マーカーを付ける

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
function dispMap(){
var obj=document.getElementById("map");
// マップ作成
var latlng = new google.maps.LatLng(35.681099,139.767084); // 東京駅
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(obj,options);
// マーカー作成
var options = {
position: latlng,
map: map,
title: "東京駅"
};
var marker = new google.maps.Marker(options);
}
</script>
</head>
<body onLoad="dispMap()">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>

4-6 マーカーに吹き出しを付ける

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
function dispMap(){
var obj=document.getElementById("map");
// マップ作成
var latlng = new google.maps.LatLng(35.681099,139.767084); // 東京駅
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(obj,options);
// マーカー作成
var options = {
position: latlng,
map: map,
title: "東京駅"
};
var marker = new google.maps.Marker(options);
// 吹き出し作成
var info_opt = { content: "緯度:35.681099,経度:139.767084" };
var info = new google.maps.InfoWindow(info_opt);
info.open(map,marker);
}
</script>
</head>
<body onLoad="dispMap()">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>

4-7 マーカーにイベントリスナーを付ける

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
function dispMap(){
var obj=document.getElementById("map");
// マップ作成
var latlng = new google.maps.LatLng(35.681099,139.767084); // 東京駅
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(obj,options);
// マーカー作成
var options = {
position: latlng,
map: map,
title: "東京駅"
};
var marker = new google.maps.Marker(options);
google.maps.event.addListener(marker, "click", function(event) {
alert("東京駅\n"+event.latLng.toString());
});
}
</script>
</head>
<body onLoad="dispMap()">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>

4-8 サークルを描く

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
function dispMap(){
var obj=document.getElementById("map");
// マップ作成
var latlng = new google.maps.LatLng(35.681099,139.767084); // 東京駅
var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(obj,options);
// Circleの描画
var circleOpts = {
center: new google.maps.LatLng(35.681099,139.767084),
map: map,
radius: 1000,
strokeWeight: 2,
strokeColor: "#0000ff",
fillColor: "#000f00",
};
var myCircle = new google.maps.Circle(circleOpts);
}
</script>
</head>
<body onLoad="dispMap()">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>

1 2