GoogleMapsAPI
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2023
?
データサイエンス/2023
?
3DCG演習/2023
?
情報デザイン概論/2023
?
情報デザイン研究/2023
?
卒業研究/2023
?
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*JavaScript | Google Maps API
~
ここでは、HTML + CSS + JavaScriptによる
Google Map の活用サンプルを紹介します。
~
&color(red){2016年6月22日より、GoogleマップのAPIの利用に...
https://developers.google.com/maps/web/
&color(red){キーはHTMLのソースコードから見えてしまいます...
https://console.developers.google.com/apis/
~
&color(red){最近のブラウザでは、個人情報保護の観点から「h...
~
***事例 地図上に現在位置を表示
//[[→DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_GPS...
GeolocationAPIを使って、現在位置を取得。GoogleMap上に表示...
-&color(red){位置情報取得の許可を求めるメッセージが出ます...
&color(red){お使いの環境によっては、正常に動作しません。};
''index.html''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-wid...
<meta charset="UTF-8">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?key=[...
<script type="text/javascript" src="sample.js">...
<link rel="stylesheet" type="text/css" href="s...
<title>Sample Page</title>
</head>
<body>
<div id="map_canvas"> </div>
<div id="pos">lat, lng</div>
</body>
</html>
''style.css''
#map_canvas {
width: 480px;
height: 640px;
}
ソース内の''YOUR API KEY''の部分に、あなたが取得したAPIキ...
~
''sample.js''
var gmap,gmarker;
window.onload = function(){
var defPos = new google.maps.LatLng(35, 135);
gmap = new google.maps.Map(document.getElementById("...
zoom : 17,
center : defPos,
mapTypeId : google.maps.MapTypeId.ROADMAP
});
gmarker = new google.maps.Marker({
positon : defPos,
map: gmap,
icon : "arrow.png"
});
navigator.geolocation.watchPosition(update);
}
function update(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var currentPos = new google.maps.LatLng(lat, lng);
gmap.setCenter(currentPos);
gmarker.setPosition(currentPos);
document.getElementById("pos").innerHTML = lat+","+l...
}
-補足
--coordinates:座標
--latitude:緯度
--longitude:経度
~
***GoogleMap 公式情報
-以下のページに Google Maps JavaScript API の活用サンプル...
https://developers.google.com/maps/documentation/javascri...
-以下にシンプルで埋め込み可能、コードは最小限の活用サンプ...
https://developers.google.com/maps/documentation/static-m...
~
~
~
終了行:
*JavaScript | Google Maps API
~
ここでは、HTML + CSS + JavaScriptによる
Google Map の活用サンプルを紹介します。
~
&color(red){2016年6月22日より、GoogleマップのAPIの利用に...
https://developers.google.com/maps/web/
&color(red){キーはHTMLのソースコードから見えてしまいます...
https://console.developers.google.com/apis/
~
&color(red){最近のブラウザでは、個人情報保護の観点から「h...
~
***事例 地図上に現在位置を表示
//[[→DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_GPS...
GeolocationAPIを使って、現在位置を取得。GoogleMap上に表示...
-&color(red){位置情報取得の許可を求めるメッセージが出ます...
&color(red){お使いの環境によっては、正常に動作しません。};
''index.html''
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-wid...
<meta charset="UTF-8">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?key=[...
<script type="text/javascript" src="sample.js">...
<link rel="stylesheet" type="text/css" href="s...
<title>Sample Page</title>
</head>
<body>
<div id="map_canvas"> </div>
<div id="pos">lat, lng</div>
</body>
</html>
''style.css''
#map_canvas {
width: 480px;
height: 640px;
}
ソース内の''YOUR API KEY''の部分に、あなたが取得したAPIキ...
~
''sample.js''
var gmap,gmarker;
window.onload = function(){
var defPos = new google.maps.LatLng(35, 135);
gmap = new google.maps.Map(document.getElementById("...
zoom : 17,
center : defPos,
mapTypeId : google.maps.MapTypeId.ROADMAP
});
gmarker = new google.maps.Marker({
positon : defPos,
map: gmap,
icon : "arrow.png"
});
navigator.geolocation.watchPosition(update);
}
function update(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var currentPos = new google.maps.LatLng(lat, lng);
gmap.setCenter(currentPos);
gmarker.setPosition(currentPos);
document.getElementById("pos").innerHTML = lat+","+l...
}
-補足
--coordinates:座標
--latitude:緯度
--longitude:経度
~
***GoogleMap 公式情報
-以下のページに Google Maps JavaScript API の活用サンプル...
https://developers.google.com/maps/documentation/javascri...
-以下にシンプルで埋め込み可能、コードは最小限の活用サンプ...
https://developers.google.com/maps/documentation/static-m...
~
~
~
ページ名: