質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

4回答

4298閲覧

JavaScriptの位置情報取得について

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2016/02/04 00:05

編集2022/01/12 10:55

JavaScriptで位置情報を取得するコードを書きました。
取得した経度と緯度をグーグルマップ上で表示したいです。(ボタンか何かを押せばマップ上に表示される的な)
どうすればいいのでしょうか?
方法をご教授ください

JavaScript

1<!doctype html> 2<html> 3</head> 4<meta charset="utf-8"> 5<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 6 7<title></title> 8</head> 9<body> 10 <h1>位置情報取得</h1> 11 <div id="result">位置情報取得中</div> 12<script> 13 navigator.geolocation.getCurrentPosition( 14 function(position){ 15 var lat = position.coords.latitude; 16 var lng = position.coords.longitude; 17 $("#result").html("経度:" + lat + "<br>緯度:" + lng); 18 }, 19 function(error){ 20 $("#result").text("エラー" + error.code); 21 },{ 22 enableHighAccuracy : true, 23 maximumAge : 0, 24 timeout : 30*1000 25 } 26 ) 27 28</script> 29</body> 30</html>

みなさまご回答ありがとうございます。
コードは理解できたのですがデバックができません
chromeを使っているのですがGPSがOFFになってしまいます
設定から
すべてのサイトに対して自分の物理的な現在地の追跡を許可する
という風にしたのですがやはりできません
なにか解決法はありますか?

5o5o_wagon👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2016/02/08 06:59

デバッグの問題だけなら、開発者コンソールからエミュレートすれば解決するかもしれないですね。
guest

回答4

0

グーグルマップで特定の座標位置を表示するには、以下のようにURL文字列を設定します。

https://www.google.co.jp/maps/@緯度,経度

例えば東京の原宿駅あたりを表示するには

https://www.google.co.jp/maps/@35.669186,139.7013494,15

このように緯度と経度を指定できます。
このマップの開き方は、ブラウザの表示が現在のページからマップへ移動してよければ次のようにします。

JavaScript

1location.href = "https://www.google.co.jp/maps/@35.669186,139.7013494,15";

現在のページを表示したままにしたければ、次のようにして別ウィンドウを開くことができます。

JavaScript

1window.open("https://www.google.co.jp/maps/@35.669186,139.7013494,15", "マップ");

現在のページの中にエンベッド(埋め込み)したい場合は・・・

HTML

1<div> 2 <iframe src="マップの埋め込み用URL文字列”></iframe> 3</div>

このような方法でページに埋め込むことができます。
例中の「マップの埋め込み用URL文字列」には、マップのURLをそのまま指定することができます。
ただし、埋め込み用に整備された Google Maps Embed API と呼ばれるURLコマンドが用意されていますので、そちらを使ったほうがより多くの機能を使うことができます。

投稿2016/02/04 02:43

編集2016/02/04 02:57
tkanda

総合スコア2425

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

Lhankor_Mhyさんの回答でズバリっぽいのですが、
元のコードを活かして、こんなのはいかがでしょうか。

Javascript

1<!DOCTYPE html> 2<html lang="ja-JP"> 3<head> 4<meta charset="UTF-8"> 5<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 6</head> 7<body> 8<div id="result" style="border: 1px #33cc33 solid; width: 150px; text-align:center;">位置情報取得中</div> 9<div id="getmap" style="border: 1px #999999 solid; background-color: #cccccc; cursor:pointer; width: 150px; text-align:center; display:none;">地図を表示</div> 10<div id="map-canvas" style="width:640px; height:480px; display:none;"></div> 11<script src="http://maps.googleapis.com/maps/api/js"></script> 12<script> 13 var lat; 14 var lng; 15 navigator.geolocation.getCurrentPosition( 16 function(position) { 17 lat = position.coords.latitude; 18 lng = position.coords.longitude; 19 $("#result").html("経度:" + lat + "<br>緯度:" + lng); 20 $("#getmap").show(); 21 }, 22 function(error){ 23 $("#result").text("エラー" + error.code); 24 },{ 25 enableHighAccuracy : true, 26 maximumAge : 0, 27 timeout : 30*1000 28 } 29 ); 30 function showTargetMap() { 31 // 緯度経度をオブジェクトにセット 32 var latlng = new google.maps.LatLng(lat , lng); 33 var mapopt = { 34 zoom: 15, // ズーム値 35 center: latlng, // 中心座標 36 mapTypeId: google.maps.MapTypeId.ROADMAP 37 }; 38 $("#map-canvas").show(); 39 // Google Maps表示 40 var mapobj = new google.maps.Map(document.getElementById('map-canvas'), mapopt); 41 // マーカー出力 42 var marker = new google.maps.Marker({ 43 map: mapobj, 44 position: latlng 45 }); 46 } 47 $(function() { 48 $("#getmap").on("click", function() { 49 showTargetMap(); 50 }); 51 }); 52</script> 53</body> 54</html>

投稿2016/02/04 07:25

schi_heil

総合スコア78

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

HTML

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5 6<title></title> 7<style> 8#map{ 9 width:200px; 10 height:200px; 11} 12</style> 13</head> 14<body> 15 <h1>位置情報取得</h1> 16 <div id="show">位置情報取得中</div> 17 <div id="map"></div> 18<script src="https://maps.googleapis.com/maps/api/js"></script> 19<script> 20navigator.geolocation.getCurrentPosition( 21 function(position){ 22 var lat = position.coords.latitude; 23 var lng = position.coords.longitude; 24 var target = document.getElementById('show'); 25 target.textContent = 'クリックで地図を表示'; 26 target.addEventListener('click',function(){ 27 showMap({lat: lat, lng: lng}); 28 }); 29 }, 30 function(error){ 31 },{ 32 enableHighAccuracy : true, 33 maximumAge : 0, 34 timeout : 30*1000 35 } 36) 37function showMap(latlng) { 38 var map = new google.maps.Map(document.getElementById('map'), { 39 zoom: 17, 40 center: latlng 41 }); 42 43 var marker = new google.maps.Marker({ 44 position: latlng, 45 map: map 46 }); 47} 48</script> 49</body> 50</html>

投稿2016/02/04 02:33

Lhankor_Mhy

総合スコア35813

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

情報ウィンドウの表示を利用して、その中に取得した緯度・経度を入れるようにすれば良いと思います。

http://www.ajaxtower.jp/googlemaps/gmarker/index3.html

投稿2016/02/04 01:49

yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問