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

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

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

Geolocation(ジオロケーション)は、携帯電話やインターネットに接続したコンピューターターミナルなど、オブジェクトの現実世界での地理的位置の情報を扱う技術であり、位置評価の実施や、実際に評価された位置を示す場合もあります。

JavaScript

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

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

4回答

3680閲覧

googlemap表示 スマホで表示されない

退会済みユーザー

退会済みユーザー

総合スコア0

Geolocation

Geolocation(ジオロケーション)は、携帯電話やインターネットに接続したコンピューターターミナルなど、オブジェクトの現実世界での地理的位置の情報を扱う技術であり、位置評価の実施や、実際に評価された位置を示す場合もあります。

JavaScript

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

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/12/12 06:54

編集2022/01/12 10:55

下記のプログラムをデバックしたらgooglemapが表示されるのは、PC上で確認できましたが、デスクトップPCのため位置の移動ができないので、位置情報および移動した場所の線の書き出しの動作の確認ができません。最終的には、スマートフォンおよびiphoneでのを試みたいのですが、スマートフォンおよびiphoneで起動した場合、マップが表示されません。お力添えよろしくお願いいたします。
###発生している問題・エラーメッセージ
/プログラム内容/
定期的に取得した位置情報をgooglemap上に線でつなげ表示(移動経路の記録)

<!DOCTYPE HTML> <html lang="ja"> <meta charset="UTF-8"></meta> <head><title>sample</title> <style type-"text/css"> #map_wrap { width: 100%; max-width: 600px; } #position { padding: 8px; background-color: #CDE; } #position span { padding-left: 1em; font-size: 90%; } #map { width: 100%; height: 500px; } #contorol button { width: 6em; text-align: center; } #contorol button:last-child { float: right; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div id="map_wrap"> <div id="position">現在位置: <span>*** 停止中 ***</span> </div> <div id="map">google map</div> <div id="contorol"> <button type="button">START</button> <button type="button">STOP</button> </div> </div> <script type="text/javascript"> var Tracker = (function(){ // *** 初期設定・準備処理 *** var minInterval = 1000; // 情報取得の最少間隔(単位 msec) var Locator = navigator.geolocation; var watchID = null; var MapElement = document.getElementById("map"); var PositionDisp = document.querySelector("#position span"); // マップ 設定 var map = new google.maps.Map( MapElement, { zoom: 15 }); // ポリライン インスタンス作成 var PolyLine = new google.maps.Polyline({ strokeColor: '#A22', strokeOpacity: 0.55, strokeWeight: 4, map: map }); // マーカー インスタンス作成 var Markers = createMarker(); function createMarker(){ var iconURL = "http://labs.google.com/ridefinder/images/"; var icon1 = new google.maps.Marker({ icon: iconURL + "mm_20_blue.png", map: map, zIndex: 10 }); var icon2 = new google.maps.Marker({ icon: iconURL + "mm_20_red.png", map: map, zIndex: 12 }); return { start: icon1, current: icon2 } } // マップ・マーカーの初期表示 var resetMap = function(){ watchTime = new Date(); Locator.getCurrentPosition(function(p){ var pos = { lat: p.coords.latitude, lng: p.coords.longitude }; map.setCenter(pos); Markers.current.setPosition(pos); Markers.start.setPosition(pos); PolyLine.setPath([new google.maps.LatLng(pos)]); }); } // watchPositionイベント処理 var watchHandler = function(p){ if((new Date()) - watchTime < minInterval) return; watchTime = new Date(); var pos = { lat: p.coords.latitude, lng: p.coords.longitude }; map.setCenter(pos); Markers.current.setPosition(pos); PolyLine.getPath().push(new google.maps.LatLng(pos)); PositionDisp.innerHTML = "緯度 " + pos.lat + " / 経度 " + pos.lng; } // *** 追跡用オブジェクト *** var tracker = { start: function(){ if(watchID) return; resetMap(); PositionDisp.innerHTML = "*** 受信中 ***"; watchID = Locator.watchPosition(watchHandler); }, stop: function(){ Locator.clearWatch(watchID); PositionDisp.innerHTML = "*** 停止中 ***"; watchID = null; } }; resetMap(); return tracker; })(); // ボタンへのイベント設定 var buttons = document.querySelectorAll("#contorol button"); google.maps.event.addDomListener(buttons[0], "click", Tracker.start); google.maps.event.addDomListener(buttons[1], "click", Tracker.stop); </script> </body> </html>

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

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

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

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

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

guest

回答4

0

HTMLを置いているサーバがHTTPSなのではないですか?
その場合、APIの呼び出しもHTTPSである必要があります。

js

1<script src="https://maps.google.com/maps/api/js?sensor=false"></script> 2

投稿2016/12/12 07:03

編集2016/12/12 07:04
shoota

総合スコア246

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

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

0

geolocation を利用した位置情報の利用については、個人情報にあたるという考え方から、SSL通信に対応していない場合、そのような警告を表示するようになりました。

SSL環境であれば、警告は表示されません。

投稿2016/12/12 07:03

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

公開しているサイト(プロトコル)がhttpだからではないでしょうか。
基本はお金がかかりますが、Let's Encryptを使用すれば無料でhttpsにできます。

Let's Encrypt 総合ポータル

投稿2016/12/12 07:02

編集2016/12/12 07:04
mukkun

総合スコア882

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

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

guest

0

PCとスマホのURLは同じですか?
テスト環境とか仮のドメインとか?
ドメインが違う場合、googlemapの仕様変更でAPIキーが必要な場合があります。
先日それで一苦労しました。。。

投稿2016/12/12 07:11

hyksm

総合スコア174

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問