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

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

ただいまの
回答率

88.81%

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

受付中

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,520
退会済みユーザー

退会済みユーザー

下記のプログラムをデバックしたら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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2017/01/11 18:38

    他のユーザから「意図的に内容が抹消された質問」という指摘を受けました
    解決後に編集機能を用いて質問内容を改変し関係のない内容にしたり、内容を削除する行為は禁止しています。
    投稿していただいた質問は、後に他の誰かが困ったときに助けになる情報資産になると考えるからです。
    「質問を編集する」ボタンから編集を行い、他のユーザにも質問内容が見えるように修正してください。

回答 4

+3

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

Let's Encrypt 総合ポータル

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/12 16:05

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る