http://w3.kuhalabo.net/wiki/index.php?action=history&feed=atom&title=Google_Maps_API_V3
Google Maps API V3 - 変更履歴
2026-05-04T08:26:00Z
このウィキのこのページに関する変更履歴
MediaWiki 1.19.2
http://w3.kuhalabo.net/wiki/index.php?title=Google_Maps_API_V3&diff=1275&oldid=prev
Kuha：/* 参考 */
2017-09-30T07:29:51Z
<p><span dir="auto"><span class="autocomment">参考</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">←前の版</td>
<td colspan='2' style="background-color: white; color:black;">2017年9月30日 (土) 07:29時点における版</td>
</tr><tr><td colspan="2" class="diff-lineno">719行：</td>
<td colspan="2" class="diff-lineno">719行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* https://developers.google.com/maps/?hl=ja</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>* https://developers.google.com/maps/?hl=ja</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">* https://developers.google.com/maps/documentation/javascript/style-reference?hl=ja</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><pre></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><pre></div></td></tr>
</table>
Kuha
http://w3.kuhalabo.net/wiki/index.php?title=Google_Maps_API_V3&diff=1196&oldid=prev
Kuha：/* その他 */
2017-05-21T01:16:25Z
<p><span dir="auto"><span class="autocomment">その他</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">←前の版</td>
<td colspan='2' style="background-color: white; color:black;">2017年5月21日 (日) 01:16時点における版</td>
</tr><tr><td colspan="2" class="diff-lineno">729行：</td>
<td colspan="2" class="diff-lineno">729行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>http://www.kuhalabo.net/mapcolor/demo.html</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>http://www.kuhalabo.net/mapcolor/demo.html</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>http://www.kuhalabo.net/~kuha/tutorial0/demo3/<del class="diffchange diffchange-inline">demo_3</del>.html</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>http://www.kuhalabo.net/~kuha/tutorial0/demo3/<ins class="diffchange diffchange-inline">demo03_3</ins>.html</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:授業|授業]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:授業|授業]]</div></td></tr>
</table>
Kuha
http://w3.kuhalabo.net/wiki/index.php?title=Google_Maps_API_V3&diff=1195&oldid=prev
Kuha：/* その他 */
2017-05-21T01:16:06Z
<p><span dir="auto"><span class="autocomment">その他</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">←前の版</td>
<td colspan='2' style="background-color: white; color:black;">2017年5月21日 (日) 01:16時点における版</td>
</tr><tr><td colspan="2" class="diff-lineno">729行：</td>
<td colspan="2" class="diff-lineno">729行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>http://www.kuhalabo.net/mapcolor/demo.html</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>http://www.kuhalabo.net/mapcolor/demo.html</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="background: #ffa; color:black; font-size: smaller;"><div>http://www.kuhalabo.net/<del class="diffchange diffchange-inline">mapcolor</del>/demo3/demo_3.html</div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>http://www.kuhalabo.net/<ins class="diffchange diffchange-inline">~kuha/tutorial0</ins>/demo3/demo_3.html</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:授業|授業]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:授業|授業]]</div></td></tr>
</table>
Kuha
http://w3.kuhalabo.net/wiki/index.php?title=Google_Maps_API_V3&diff=1194&oldid=prev
Kuha：/* その他 */
2017-05-21T01:13:07Z
<p><span dir="auto"><span class="autocomment">その他</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">←前の版</td>
<td colspan='2' style="background-color: white; color:black;">2017年5月21日 (日) 01:13時点における版</td>
</tr><tr><td colspan="2" class="diff-lineno">728行：</td>
<td colspan="2" class="diff-lineno">728行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==その他==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==その他==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>http://www.kuhalabo.net/mapcolor/demo.html</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>http://www.kuhalabo.net/mapcolor/demo.html</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">http://www.kuhalabo.net/mapcolor/demo3/demo_3.html</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:授業|授業]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:授業|授業]]</div></td></tr>
</table>
Kuha
http://w3.kuhalabo.net/wiki/index.php?title=Google_Maps_API_V3&diff=1193&oldid=prev
Kuha：/* その他 */
2017-05-21T01:08:34Z
<p><span dir="auto"><span class="autocomment">その他</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">←前の版</td>
<td colspan='2' style="background-color: white; color:black;">2017年5月21日 (日) 01:08時点における版</td>
</tr><tr><td colspan="2" class="diff-lineno">727行：</td>
<td colspan="2" class="diff-lineno">727行：</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==その他==</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>==その他==</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><ins style="color: red; font-weight: bold; text-decoration: none;">http://www.kuhalabo.net/mapcolor/demo.html</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:授業|授業]]</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>[[Category:授業|授業]]</div></td></tr>
</table>
Kuha
http://w3.kuhalabo.net/wiki/index.php?title=Google_Maps_API_V3&diff=57&oldid=prev
Kuha：ページの作成：「== 概要 == Google Maps API V3を使ってみる。 ==地図の表示== まずはここから。 <pre> <!DOCTYPE html> <html> <head> <meta http-equiv="content-t...」
2013-04-14T08:45:19Z
<p>ページの作成：「== 概要 == Google Maps API V3を使ってみる。 ==地図の表示== まずはここから。 <pre> <!DOCTYPE html> <html> <head> <meta http-equiv="content-t...」</p>
<p><b>新規ページ</b></p><div>== 概要 ==<br />
Google Maps API V3を使ってみる。<br />
<br />
==地図の表示==<br />
まずはここから。<br />
<pre><br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<style type="text/css"><br />
html { height: 100% }<br />
body { height: 100%; margin: 0px; padding: 0px }<br />
#map_canvas { height: 100% }<br />
</style><br />
<title>Google Maps API サンプル</title><br />
</head><br />
<body><br />
<p>Google Maps APIを使ったサンプルです。</p><br />
</body><br />
</html><br />
</pre><br />
<br />
=== Google Maps APIの取得 ===<br />
<br />
*GoogleのサイトからAPIをインクルードする。<br />
*センサーの指定'''sensor=XXXX'''は必須<br />
**trueの場合、端末のGPSなどから現在位置情報を使用する。<br />
**flaseの場合、現在位置情報は使用しない。<br />
<pre><br />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><br />
</pre><br />
必要に応じて、言語の指定などを指定する場合は、以下の通り。（しなくてもよい）<br />
*デフォルトでは、ブラウザの言語設定になる。<br />
*以下は、明示的に言語を日本語に設定している<br />
<pre><br />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script><br />
</pre><br />
英語設定の場合は以下の通り<br />
<pre><br />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script><br />
</pre><br />
<br />
=== 地図表示エリアの記述 ===<br />
<br />
body内にdivで地図を表示する領域を指定する。<br />
*idでdiv要素に名前をつける。この例は、'''map_canvas'''<br />
*widthとheightで領域のピクセルを指定<br />
<br />
<pre><br />
<div id="map_canvas" style="width:500px; height:300px"></div><br />
</pre><br />
<br />
CSSを記述する。<br />
*ブラウザによっては、サイズが指定されていないと、0 x 0 ピクセルと見なされて地図が表示されないことがある。<br />
<pre><br />
<style type="text/css"><br />
html { height: 100% }<br />
body { height: 100%; margin: 0px; padding: 0px }<br />
#map_canvas { height: 100% }<br />
</style><br />
</pre><br />
<br />
===地図表示のJavaScript===<br />
<br />
head内に地図を定義するJavaScriptを<script>タグで囲って記述する。<br />
* google.maps.LatLngで緯度・経度クラスオブジェクトを作る<br />
* 地図表示に使う情報をoptionとして指定<br />
** 必須のoptionは、zoom,center,mapTypeId<br />
** 他のoptionは、https://developers.google.com/maps/documentation/javascript/reference?hl=ja#MapOptions<br />
* google.maps.Mapで地図クラスオブジェクトを作る<br />
** 地図をbody内に表示するdiv領域'''map_canvas'''を指定する。<br />
<pre><br />
<script type="text/javascript"><br />
//<![CDATA[<br />
function initialize() {<br />
var latlng = new google.maps.LatLng(35.463536,139.32945);<br />
var opts = {<br />
zoom: 15,<br />
center: latlng,<br />
mapTypeId: google.maps.MapTypeId.ROADMAP<br />
};<br />
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);<br />
}<br />
//]]><br />
</script><br />
</pre><br />
<br />
=== 地図表示スクリプトの呼び出し関数 ===<br />
bodyタグにonloadオプションで表示と同時に呼び出される関数initialize()を指定する。<br />
<pre><br />
<body onload="initialize()"><br />
</pre><br />
<br />
=== 完成版 ===<br />
<br />
<pre><br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<style type="text/css"><br />
html { height: 100% }<br />
body { height: 100%; margin: 0px; padding: 0px }<br />
#map_canvas { height: 100% }<br />
</style><br />
<title>Google Maps API サンプル</title><br />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><br />
<script type="text/javascript"><br />
//<![CDATA[<br />
function initialize() {<br />
var latlng = new google.maps.LatLng(35.463536,139.32945);<br />
var opts = {<br />
zoom: 15,<br />
center: latlng,<br />
mapTypeId: google.maps.MapTypeId.ROADMAP<br />
};<br />
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);<br />
}<br />
//]]><br />
</script><br />
</head><br />
<br />
<body onload="initialize()"><br />
<p>Google Maps APIを使ったサンプルです。</p><br />
<br />
<div id="map_canvas" style="width:500px; height:300px"></div><br />
<br />
</body><br />
<br />
</html><br />
</pre><br />
<br />
*緯度経度、ズームの値の取得は、地図上で右クリック<br />
*表示場所、ズーム、マップタイプを変えてみる<br />
**HYBRID This map type displays a transparent layer of major streets on satellite images.<br />
**ROADMAP This map type displays a normal street map.<br />
**SATELLITE This map type displays satellite images.<br />
**TERRAIN This map type displays maps with physical features such as terrain and vegetation.<br />
*MapTypeIdについては、以下を参照<br />
** https://developers.google.com/maps/documentation/javascript/reference?hl=ja#MapTypeId<br />
<br />
==ボタンで地図の変更==<br />
<br />
===地図の種類の変更===<br />
mapオブジェクトをグローバルに変更<br />
<pre><br />
var map;<br />
</pre><br />
衛星地図に変更する関数を書く。<br />
<pre><br />
// 衛星地図に変更する<br />
function changeMapType() {<br />
map.setMapTypeId(google.maps.MapTypeId.SATELLITE);<br />
}<br />
</pre><br />
上記関数を呼び出すボタンを作る。<br />
<pre><br />
<input type="button" value="衛星地図に変更" onClick="changeMapType()" /><br />
</pre><br />
<br />
===位置の移動===<br />
<br />
中心位置を変更<br />
<pre><br />
var osaka = new google.maps.LatLng(34.694203,135.502625);<br />
// 中心位置を変更する<br />
function changeCenter() {<br />
map.setCenter(osaka);<br />
}<br />
</pre><br />
<br />
滑らかに移動<br />
<pre><br />
var senzu = new google.maps.LatLng(35.46628,139.337497);<br />
//滑らかに移動<br />
function changeCenterSenzu() {<br />
map.panTo(senzu);<br />
}<br />
</pre><br />
<br />
指定したピクセルだけ移動<br />
*地図の座標系<br />
**西から東（x 値の場合）に増える<br />
**北から南（y 値の場合）に増える<br />
<pre><br />
//指定したピクセルだけ移動<br />
function gotoNorthEast() {<br />
map.panBy(100,-50);<br />
}<br />
</pre><br />
<br />
==地図の座標の取得==<br />
<br />
<pre><br />
var latlng = map.getCenter();<br />
var lat = latlng.lat();<br />
var lng = latlng.lng();<br />
</pre><br />
<br />
==イベントリスナー==<br />
<br />
地図上をクリックすると、緯度・経度がアラートウィンドウに表示される。<br />
<pre><br />
// clickイベントを取得するListenerを追加<br />
google.maps.event.addListener(map, 'click', clickEventFunc);<br />
<br />
function clickEventFunc(event) {<br />
alert(event.latLng.toString());<br />
}<br />
</pre><br />
Mapクラスにおける「click」イベント発生時に呼び出されるfunctionの引数は、MouseEvent。<br />
* https://sites.google.com/site/gmapsapi3/Home/v3_reference<br />
* https://developers.google.com/maps/documentation/javascript/events?hl=ja<br />
<br />
地図上をクリックすると、緯度・経度がtable内に表示される。<br />
<pre><br />
google.maps.event.addListener(map, 'click', clickEventFunc2);<br />
function clickEventFunc2(event) {<br />
document.getElementById("show_lat").innerHTML = event.latLng.lat();<br />
document.getElementById("show_lng").innerHTML = event.latLng.lng();<br />
}<br />
</pre><br />
<br />
<pre><br />
<table border="1"><br />
<tr><th>LAT</th><td id="show_lat"></td></tr><br />
<tr><th>LNG</th><td id="show_lng"></td></tr><br />
</table><br />
</pre><br />
<br />
== オーバーレイ ==<br />
オーバーレイは緯度/経度座標に固定された地図上のオブジェクト。<br />
たとえば、マーカー、情報ウィンドウ、ポリライン、ポリゴン・・・<br />
<br />
===マーカー ===<br />
<br />
Markerの設定<br />
<pre><br />
var mkopts = {<br />
position: latlng,<br />
map: map,<br />
title: "Tokyo Koogei"<br />
};<br />
var marker = new google.maps.Marker(mkopts);<br />
</pre><br />
<br />
マーカーをボタンで表示・非表示<br />
<pre><br />
function markerOn() {<br />
marker.setVisible(true);<br />
}<br />
<br />
function markerOff() {<br />
marker.setVisible(false);<br />
}<br />
</pre><br />
<br />
<pre><br />
マーカー<br><br />
<input type="button" value="出す" onclick="markerOn()" /><br />
<input type="button" value="消す" onclick="markerOff()" /><br />
</pre><br />
<br />
マーカーをドラッグ可能にする/<br />
マーカーをアニメーション表示する<br />
<pre><br />
var mkopts = {<br />
position: latlng_koogei,<br />
map: map,<br />
draggable: true,<br />
animation: google.maps.Animation.DROP,<br />
//animation: google.maps.Animation.BOUNCE,<br />
title: "Tokyo Koogei大学"<br />
};<br />
</pre><br />
<br />
マーカー移動に関する他のオプションも試してみる。<br />
<pre><br />
dragCrossMove<br />
bouncy<br />
autoPan<br />
</pre><br />
<br />
マーカーアニメーション表示のトグル関数<br />
<pre><br />
function toggleBounce() {<br />
if (marker.getAnimation() != null) {<br />
marker.setAnimation(null);<br />
} else {<br />
marker.setAnimation(google.maps.Animation.BOUNCE);<br />
}<br />
}<br />
</pre><br />
<br />
マーカーとして独自のアイコンを設定<br />
<pre><br />
var image = "./img/icon.png";<br />
var mkopts01 = {<br />
position: senzu,<br />
map: map,<br />
title: "千頭橋",<br />
icon: image<br />
};<br />
var marker1 = new google.maps.Marker(mkopts01);<br />
</pre><br />
<br />
より複雑な独自マーカーを配列で指定<br />
<pre><br />
var places = [<br />
['小鮎幼稚園', 35.46266214773244, 139.32520138092036, 4],<br />
['小鮎中', 35.46203296822141, 139.32327019042964, 5],<br />
['島津製作所', 35.46112414468374, 139.326574671936, 3],<br />
['小鮎郵便局', 35.46378067693368, 139.3217681533813, 2],<br />
['本禅時', 35.45944628963795, 139.3226693756103, 1]<br />
];<br />
<br />
function setMarkersOn(map, locations) {<br />
var image = new google.maps.MarkerImage('img/flag.png',<br />
new google.maps.Size(20, 32),<br />
new google.maps.Point(0,0),<br />
new google.maps.Point(0, 32));<br />
var shadow = new google.maps.MarkerImage('img/flag_shadow.png',<br />
new google.maps.Size(37, 32),<br />
new google.maps.Point(0,0),<br />
new google.maps.Point(0, 32));<br />
var shape = {<br />
coord: [1, 1, 1, 20, 18, 20, 18 , 1],<br />
type: 'poly'<br />
};<br />
for (var i = 0; i < locations.length; i++) {<br />
var places = locations[i];<br />
var myLatLng = new google.maps.LatLng(places[1], places[2]);<br />
var marker = new google.maps.Marker({<br />
position: myLatLng,<br />
map: map,<br />
shadow: shadow,<br />
icon: image,<br />
shape: shape,<br />
title: places[0],<br />
zIndex: places[3]<br />
});<br />
}<br />
}<br />
<br />
</pre><br />
<br />
===情報ウィンドウ（ふきだし）===<br />
<br />
情報ウィンドウの表示<br />
<pre><br />
var latlng = new google.maps.LatLng(35.463536,139.32945);<br />
<br />
var iwopts = {<br />
content: 'こうげい',<br />
position: latlng<br />
};<br />
<br />
var infowindow = new google.maps.InfoWindow(iwopts);<br />
<br />
infowindow.open(map);<br />
</pre><br />
<br />
情報ウィンドウを閉じる<br />
<pre><br />
infowindow.close();<br />
</pre><br />
<br />
<br />
===ポリライン、ポリゴン===<br />
* https://developers.google.com/maps/documentation/javascript/overlays?hl=ja#Polylines<br />
* https://developers.google.com/maps/documentation/javascript/overlays?hl=ja#Polygons<br />
<br />
===円、矩形（四角形）===<br />
*https://developers.google.com/maps/documentation/javascript/overlays?hl=ja#BasicShapes<br />
<br />
<pre><br />
//Circle生成<br />
var cityCircle;<br />
function setCircle() {<br />
var circleOpts = {<br />
strokeColor: "#FF0000",<br />
strokeOpacity: 0.8,<br />
strokeWeight: 2,<br />
fillColor: "#FF0000",<br />
fillOpacity: 0.35,<br />
center: senzu,<br />
radius: 200<br />
};<br />
cityCircle = new google.maps.Circle(circleOpts);<br />
}<br />
<br />
function circleOn() {<br />
cityCircle.setMap(map);<br />
}<br />
function circleOff() {<br />
cityCircle.setMap(null);<br />
}<br />
<br />
//Rectangle生成<br />
var cityRectangle;<br />
function setRectangle() {<br />
var cityBounds = new google.maps.LatLngBounds(honzen,senzu);<br />
var rectangleOpts = {<br />
strokeColor: "#FF0000",<br />
strokeOpacity: 0.8,<br />
strokeWeight: 2,<br />
fillColor: "#FF0000",<br />
fillOpacity: 0.35,<br />
bounds: cityBounds<br />
};<br />
cityRectangle = new google.maps.Rectangle(rectangleOpts);<br />
}<br />
<br />
function rectangleOn() {<br />
cityRectangle.setMap(map);<br />
}<br />
function rectangleOff() {<br />
cityRectangle.setMap(null);<br />
}<br />
</pre><br />
<br />
表示・非表示ボタン<br />
<pre><br />
円<br />
<input type="button" value="描画" onClick="circleOn()" /><br />
<input type="button" value="消す" onClick="circleOff()" /><br />
矩形<br />
<input type="button" value="描画" onClick="rectangleOn()" /><br />
<input type="button" value="消す" onClick="rectangleOff()" /><br />
</pre><br />
<br />
==ジオコーディング==<br />
<br />
* https://developers.google.com/maps/documentation/geocoding/index?hl=ja<br />
* Google Maps JavaScript API V3 サービス<br />
** https://developers.google.com/maps/documentation/javascript/services?hl=ja#Geocoding<br />
<br />
=== 住所から緯度経度情報を取得 ===<br />
住所や場所を入力して、地図にマーカーを表示する。<br />
<pre><br />
var map; <br />
var geocoder;<br />
<br />
function initialize() {<br />
//ジオコーダの設定<br />
geocoder = new google.maps.Geocoder();<br />
//地図の設定<br />
var opts = {<br />
zoom: 15,<br />
center: latlng_koogei,<br />
mapTypeId: google.maps.MapTypeId.ROADMAP<br />
//mapTypeId: google.maps.MapTypeId.SATELLITE<br />
};<br />
map = new google.maps.Map(document.getElementById("map_canvas"), opts);<br />
}<br />
<br />
function codeAddress() {<br />
var address = document.getElementById("address").value;<br />
geocoder.geocode( { 'address': address}, function(results, status) {<br />
if (status == google.maps.GeocoderStatus.OK) {<br />
map.setCenter(results[0].geometry.location);<br />
var marker = new google.maps.Marker({<br />
map: map,<br />
position: results[0].geometry.location<br />
});<br />
} else {<br />
alert("Geocode was not successful for the following reason: " + status);<br />
}<br />
});<br />
}<br />
</pre><br />
<br />
検索結果は、resultオブジェクトに入っており、<br />
result[0]が第1候補、result[1]が第2候補、result[2]が第3候補というように、候補順に結果が配列に収められている。<br />
<br />
住所入力テキストボックスと検索ボタン<br />
<pre><br />
<div><br />
場所を入力：<br />
<input id="address" type="textbox" value=""><br />
<input type="button" value="Encode" onclick="codeAddress()"><br />
</div><br />
</pre><br />
<br />
=== 緯度経度情報から住所を取得(リバースジオコーディング) ===<br />
<br />
イベントリスナーを利用して、クリックした位置の緯度経度情報から、住所を取得してテーブルに表示する。<br />
<pre><br />
google.maps.event.addListener(map, 'click', clickGetLatlng);<br />
function clickGetLatlng(event) {<br />
var lat = event.latLng.lat();<br />
var lng = event.latLng.lng();<br />
var latlng = new google.maps.LatLng(lat, lng);<br />
geocoder.geocode({'latLng': latlng}, function(results, status) {<br />
if (status == google.maps.GeocoderStatus.OK) {<br />
if (results[0]) {<br />
marker = new google.maps.Marker({<br />
position: latlng,<br />
map: map<br />
});<br />
document.getElementById("show_address").innerHTML = results[0].formatted_address;<br />
}<br />
} else {<br />
alert("Geocoder エラー: " + status);<br />
}<br />
});<br />
}<br />
</pre><br />
<br />
緯度、経度、住所を表示するテーブル<br />
<pre><br />
<table border="1"><br />
<tr><th>緯度</th><td id="show_lat">ido</td></tr><br />
<tr><th>経度</th><td id="show_lng">keido</td></tr><br />
<tr><th>住所</th><td id="show_address">address</td></tr><br />
</table><br />
</pre><br />
<br />
緯度経度情報から住所を取得して、テーブル内に記述する関数<br />
<pre><br />
function codeLatLng(lat,lng) {<br />
var latlng = new google.maps.LatLng(lat, lng);<br />
geocoder.geocode({'latLng': latlng}, function(results, status) {<br />
if (status == google.maps.GeocoderStatus.OK) {<br />
if (results[0]) {<br />
document.getElementById("show_address").innerHTML = results[0].formatted_address;<br />
}<br />
} else {<br />
alert("Geocoder エラー: " + status);<br />
}<br />
});<br />
}<br />
</pre><br />
<br />
==GPSによる現在位置の取得GeoLocation==<br />
<br />
sensorをtrueにする。<br />
<pre><br />
<script src="http://maps.google.com/maps/api/js?v=3&sensor=true" type="text/javascript" charset="UTF-8"></script><br />
</pre><br />
<br />
navigator.geolocation.getCurrentPositionで現在位置の緯度経度情報をGPSから取得する。<br />
<pre><br />
var map;<br />
function initialize() {<br />
// Google Mapで利用する初期設定用の変数<br />
var latlng = new google.maps.LatLng(0, 0);<br />
var opts = {<br />
zoom: 17,<br />
mapTypeId: google.maps.MapTypeId.ROADMAP,<br />
center: latlng<br />
};<br />
map = new google.maps.Map(document.getElementById("map_camvas"), opts);<br />
<br />
// W3C Geolocationを使う<br />
if(navigator.geolocation) {<br />
navigator.geolocation.getCurrentPosition(handleGeolocation,handleNoGeolocation);<br />
} else {<br />
alert("W3C Geolocationがありません");<br />
}<br />
}<br />
<br />
function handleGeolocation(position) {<br />
// 位置情報を取得<br />
var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);<br />
map.setCenter(latlng); <br />
}<br />
<br />
// エラーの内容を表示<br />
function handleNoGeolocation(err) {<br />
var errCodeStr;<br />
// エラー内容を示す文字列を用意。<br />
if (err.code == 0) {<br />
errCodeStr = "UNKNOWN_ERROR";<br />
} else if (err.code == 1) {<br />
errCodeStr = "PERMISSION_DENIED";<br />
} else if (err.code == 2) {<br />
errCodeStr = "POSITION_UNAVAILABLE";<br />
} else if (err.code == 3) {<br />
errCodeStr = "TIMEOUT";<br />
} else {<br />
errCodeStr = "想定外";<br />
}<br />
var errStr = "失敗 [" + err.code + "] " + errCodeStr;<br />
// 失敗内容をふきだしで表示。位置はいい加減。<br />
alert(errStr);<br />
}<br />
</pre><br />
<br />
==サイドバーとの連動==<br />
<br />
<pre><br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />
<link rel="stylesheet" type="text/css" href="./style.css" /><br />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3"></script><br />
<script type="text/javascript"><br />
//<![CDATA[<br />
var restaurantList = [<br />
{"latlng":[35.454839,139.34432],name:"○屋製麺店",comment:"味玉塩ラーメンがおすすめ"},<br />
{"latlng":[35.443127,139.299007],name:"セルバジーナ",comment:"自家製地ビールのイタリアン"},<br />
{"latlng":[35.44503,139.312407],name:"アマンダンヒルズ",comment:"身近なフレンチレストラン"},<br />
{"latlng":[35.436093,139.314078],name:"HAPPY cafe 食堂",comment:"カレーとドリアがおいしい"},<br />
{"latlng":[35.490311,139.364496],name:"My Lan 美蘭",comment:"ベトナム料理がおいしい"},<br />
{"latlng":[35.464021,139.331918],name:"工芸大学食MESA",comment:"カフェテリア形式レストラン"}<br />
];<br />
var map;<br />
var infowindow;<br />
var geocoder;<br />
<br />
function initialize() {<br />
//地図の生成<br />
var opts = {<br />
//center: latlng,<br />
mapTypeId: google.maps.MapTypeId.ROADMAP<br />
};<br />
map = new google.maps.Map(document.getElementById("map_canvas"), opts);<br />
<br />
//地図上にマーカーを配置していく<br />
var bounds = new google.maps.LatLngBounds();<br />
var restaurant, i, latlng;<br />
for (i in restaurantList) {<br />
//マーカーを作成<br />
restaurant = restaurantList[i];<br />
latlng = new google.maps.LatLng(restaurant.latlng[0], restaurant.latlng[1]);<br />
bounds.extend(latlng);<br />
var marker = createMarker(latlng, restaurant.name, restaurant.comment);<br />
<br />
//サイドバーのボタンを作成<br />
createMarkerButton(marker);<br />
}<br />
//マーカーが全て収まるように地図の中心とズームを調整して地図表示<br />
map.fitBounds(bounds);<br />
}<br />
function createMarker(latlng, name, comment) {<br />
//マーカーを作成<br />
var marker = new google.maps.Marker({<br />
position : latlng,<br />
map : map,<br />
title : name<br />
});<br />
//マーカーがクリックされたら、情報ウィンドウを表示<br />
google.maps.event.addListener(marker, "click", function(){<br />
if(infowindow) infowindow.close();<br />
var iwopts = {<br />
content: "<b>" + name + "</b><br>" + comment<br />
};<br />
infowindow = new google.maps.InfoWindow(iwopts);<br />
infowindow.open(map, marker);<br />
});<br />
return marker;<br />
}<br />
function createMarkerButton(marker) {<br />
//サイドバーにマーカ一覧を作る<br />
var ul = document.getElementById("marker_list");<br />
var li = document.createElement("li");<br />
var title = marker.getTitle();<br />
li.innerHTML = title;<br />
ul.appendChild(li);<br />
<br />
//サイドバーがクリックされたら、マーカーを擬似クリック<br />
google.maps.event.addDomListener(li, "click", function(){<br />
google.maps.event.trigger(marker, "click");<br />
});<br />
}<br />
window.onload = initialize;<br />
//]]><br />
</script><br />
</head><br />
<body><br />
<h1>厚木のグルメマップ</h1><br />
<div id="map_canvas"></div><br />
<div id="side_bar"><br />
<ul id="marker_list"></ul><br />
</div><br />
</body><br />
</html><br />
</pre><br />
<br />
<pre><br />
html, body {<br />
width : 100%;<br />
height : 100%;<br />
margin : 0;<br />
}<br />
#map_canvas {<br />
width:100%;<br />
height:100%;<br />
}<br />
body #side_bar {<br />
width:20%;<br />
height:100%;<br />
float:right;<br />
overflow-y: scroll;<br />
}<br />
body #map_canvas {<br />
width:80%;<br />
height:80%;<br />
float:left;<br />
}<br />
body ul#marker_list {<br />
list-style-type: none;<br />
padding:0;<br />
}<br />
body ul#marker_list li {<br />
cursor: pointer;<br />
margin: 5px;<br />
border: 1px solid #888;<br />
padding: 5px;<br />
font-size: 75%;<br />
}<br />
</pre><br />
<br />
==参考==<br />
<br />
* https://developers.google.com/maps/?hl=ja<br />
<br />
<pre><br />
</pre><br />
<br />
<pre><br />
</pre><br />
<br />
==その他==<br />
<br />
[[Category:授業|授業]]</div>
Kuha