- 締切済み
javascriptで困っています。
以下のような、現在地を取得するhtmlコンテンツを作ったのですが、スマホによってきちんと取得できたり、Failed to start Geolocation serviceというメッセージが出たりします。いずれの場合もGPSはオンにしています。メッセージが出るのはブラウザーの影響とか何かあるのでしょうか？ブラウザーがサポートしていない場合はLocation APIがサポートされていません。と表示するようにしているのですが、Failed to start Geolocation serviceが出る原因が分かりません。ご存知の方がいらっしゃいましたら、教えてください。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>現在地取得</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <style> #map { width: 480px; height: 640px; border: solid 1px #ccc; } </style> </head> <body> <h1>Location API サンプル</h1> <div id="map"></div> <div id="message"></div> <script> window.onload =function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var options = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map'), options); var marker = new google.maps.Marker({ position: latlng, map: map, title: '現在地' }); }, function(e) { document.getElementById('message').innerHTML = typeof e == 'string' ? e : e.message; }); } else { document.getElementById('message').innerHTML = 'Location APIがサポートされていません。'; } }; </script> </body> </html>
- dkong
- お礼率86% (170/197)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- やぎ じじい（@yagijijii）
- ベストアンサー率56% (63/112)
sensor=true にしてみると変わりませんか。 本来、ここはスマホの位置情報を利用するのであれば、 trueにしなければならないはずです。
関連するQ&A
- javascriptで困ってます。
モーダルを実装するプラグイン「colorbox」を使用してgooglemapを表示しようとしてるのですがうまくいきません。以下のように作ってみたのですが、地図の一部しか読み込まれません。 いろいろ調べてみると非表示にしていたdivにgooglemapを読み込んでいるので、高さ、幅が決まっていない状態なので、地図の一部しか読み込まれないということでした。 <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> のあたりも無理な記述になっています。 colorboxで非表示になっていたdivが表示になったときに地図をきちんと読み込まれるようにするにはどのようにすればよいのでしょうか？よろしくお願いします。 <html> <head> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/jquery.colorbox.js"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(34.0,135.0); var opts = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var m_latlng = new google.maps.LatLng(34.0,135.0); var marker = new google.maps.Marker({ position: m_latlng, map: map }); } $(function(){ $('.inline').colorbox({ inline:true, width:"80%", height:"80%", }); }); </script> </head> <body> <a href="#inline_content" class="inline" title="" >googlmap</a> <div style='display:none'> <div id='inline_content'> <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
jQueryMobileを使って地図を表示したいと思っています。 ４か所にマーカーを表示させ、そのマーカーをクリックするとそれぞれのurlに飛ぶようにしたいのですが、うまくいきません。for文の中のgoogle.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;});のところがおかしいのでしょうか？myMarkerを名前を変えながらgoogle.maps.event.addListenerをしていかないとだめなのでしょうか？教えてください。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Google マップの表示</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <style type="text/css"> <!-- #map_canvas { width:100%; height:400px; } --> </style> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> $(function() { var data = new Array();//マーカー位置の緯度経度 data.push({position: new google.maps.LatLng(35.681382, 139.766084), content: '東京駅', url:'http://www.jreast.co.jp/estation/stations/1039.html'}); data.push({position: new google.maps.LatLng(34.809445,135.532408), content: '太陽の塔', url:'http://park.expo70.or.jp/'}); data.push({position: new google.maps.LatLng(43.062584,141.353627), content: '時計台', url:'http://www15.ocn.ne.jp/~tokeidai/'}); data.push({position: new google.maps.LatLng(26.694183,127.877963), content: '美ら海水族館', url:'http://oki-churaumi.jp/'}); var latlng = new google.maps.LatLng(36.449567,137.636719); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); for (i = 0; i < data.length; i++) { var myMarker = new google.maps.Marker({ position: data[i].position, map: map, icon: "km.png" }); google.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;}); } $('#map_content').live('pageshow',function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(Latlng); }); }); </script> </head> <body> <div data-role="page" id="map"> <div data-role="header"> <h1>Google マップの表示</h1> </div> <div data-role="content" id="map_content"> <div id="map_canvas"></div> </div> <div data-role="footer"> <h4>© map</h4> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
読み込まれたら、watchPositionで位置情報を取得し続け、ボタンを押したタイミングでmap_draw関数を実行して、地図を表示させようと思っています。そのときseidoが５以下のときだけ地図を表示させたいので、seidoが５より大きいときは、map_draw関数をもう一度呼び出すループを考えました。しかし、watchPositionではきちんとseido = position.coords.accuracy;の値がとれており、５以下になっているのですが、map_draw関数のなかでseidoの変数をうまく取得できません。map_draw関数では最初の一回目だけ取得して、後は値が変わりません。ループの部分に問題があるのでしょうか？教えていただければと思い投稿しました。よろしくお願いします。 <html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript" charset="utf-8"> var ido; var keido ; var seido ; var map; var btn; window.onload = function(){ btn = document.getElementById("btn"); btn.addEventListener('click', map_draw, false); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); } function update(position){ ido = position.coords.latitude; keido = position.coords.longitude; seido = position.coords.accuracy; var htmlTxt = "Lat." + ido + "Lng" + keido+ "Acc" + seido; htmlTxt += "<br>"+(new Date()); var pos = document.getElementById("pos"); pos.innerHTML = htmlTxt; } function poserror(position){ alert("error"); } function map_draw(){ if(seido>5){ map_draw(); }else{ var lat = ido; var lng = keido; var Latlng = new google.maps.LatLng( lat , lng ); var myOptions = { zoom: 17, center: Latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); } } </script> </head> <body> <p id="pos">情報</p> <div id="map_canvas" style="width:480px; height:640px;">地図</div> <button id="btn">地図を描く</button> </body>
- ベストアンサー
- JavaScript
- ラジオボタンとテキストボックスの連動
現在googleマップで経度、緯度の取得ができました。 そこで、こちらのサイト（http://www.geocities.jp/standing_art/hoheto/idokeido_old.html）のようにラジオボタン選択時のテキストボックスにのみ経度、緯度の取得を行いたいのですがどうすればいいでしょうか？ 今あるソースはこれです。 <!DOCTYPE html> <html> <head> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //<![CDATA[ var map; function init() { var latlng = new google.maps.LatLng(39, 138); var opts = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; map = new google.maps.Map(document.getElementById("map"), opts); google.maps.event.addListener(map, 'click', mylistener); } function mylistener(event) { document.getElementById("show_lng").innerHTML = event.latLng.lng(); document.getElementById("show_lat").innerHTML = event.latLng.lat(); } //]]> </script> </head> <body onload="init()"> <div id="map" style="height:560px"></div> 緯度 : <div id="show_lng"></div> 経度 : <div id="show_lat"></div> </body> </html>
- 締切済み
- JavaScript
- googlemapについて教えてください。
googlemapでマーカーが追随するようにしたくて、function update(position) の関数のはじめにif(marker!=null){marker.setMap(null);}を入れてマーカーを消してから、次のマーカーがつくようにとしたつもりなのですが、うまくいきません。どのようにしたら、現在地にマーカーがつくようになるのでしょうか。下の場合マーカーがたくさんつきます。 よろしくお願いします。 <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript"> var gmap; window.onload = function(){ var myLatlng = new google.maps.LatLng( 33 , 130 ); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var myLatlng = new google.maps.LatLng( lat , lng ); gmap.setCenter( myLatlng ); var marker = new google.maps.Marker({ position: myLatlng, map: gmap }); } function poserror(position){alert("error");} </script> </head> <body> <div id="map_canvas" style="width:95%; height:500px ; border:solid 3px #ccc;"></div> </body> </html>
- ベストアンサー
- JavaScript
- Google Maps V3のズームの規制
現在htmlにはhead内に <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=123456&sensor=false"></script> <script language="JavaScript" type="text/javascript" src="v3.js"></script> v3スクリプト内に //functionコード function mapload() { var latlng = new google.maps.LatLng(123,456); var opts = { zoom: 16, center: latlng, //マップタイプHYBRID（航空写真＋地図）ROADMAP（地図）SATELLITE（航空写真）TERRAIN（地形） mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: { mapTypeId: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN ] } }; //IDコード var map = new google.maps.Map (document.getElementById("map"),opts); //Marker var LatLng = new google.maps.LatLng(123,456); var contentString = 'ここです！'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var image = new google.maps.MarkerImage ('アイコンURL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var shadow = new google.maps.MarkerImage ('アイコン影画像URL', new google.maps.Size(30, 30), new google.maps.Point(0,0), new google.maps.Point(15, 20)); var marker = new google.maps.Marker({ position: LatLng, map: map, title: "ここです！",icon: image,shadow: shadow }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } と記載し、html内のスクリプトのとこに表示しています。 表示される地図のズームを規制したいと考え、mapType.maxZoom = 19; mapType.minZoom = 2;のようなものを記入しても何も変化しません。 上記スクリプトの表記のどこに何を入れれば規制できるのでしょうか。 追伸、google.maps.MapTypeId.TERRAINと地図と地形のみ表示指定しているのですが、実際は、地図と航空地図になります。
- ベストアンサー
- JavaScript
- google map吹き出し
下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
- ベストアンサー
- AJAX
- google map api v3の表示の不具合について教えてください
google map api v3の表示の不具合について教えてください。 google map api v3を実装してマーカーをつけたのですが、あれこれ直していたら表示されない箇所ができてしまいました。（下記画像参照） ソースは下記です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>××</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/page.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById("map"); var myOptions = { zoom: ズーム, center: new google.maps.LatLng(緯度, 経度), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var map = new google.maps.Map(mapdiv, myOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(緯度, 経度), map: map, title: '名称' }); }); </script> </head> <div id="map"></div> お手数かけて申し訳ありませんが、ホームページ初心者なのでご指導いただければ助かります。 なにとぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- GoogleMapAPI V3 にて、マップの表示がずれてしまいます。
GoogleMapAPI V3 にて、マップの表示がずれてしまいます。 Google Map を表示させるタブをクリックすることで、 下記ソースの「id="gmap"」の箇所を display :block で表示させるようにしているのですが、 その際に、マップの表示がくずれてしまいます。 （もちろん「id="gmap"」を初期表示としていた場合はくずれません） V2では、 こちらや、 http://okwave.jp/qa/q4513879.html こちらで http://d.hatena.ne.jp/nitoyon/20050917/p2 解決出来たのですが、V3での解決方法が分かりません。。 どなたかご教授願えないでしょうか。 よろしくお願いいたします。 ----------------------------------------------- <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script> <script type="text/javascript"> var latlng = new google.maps.LatLng(lat, lng); var mapOptions = { zoom: 18, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, }; var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); </script> </head> <body> ～略～ <--! 写真を表示させるタブ --> <div id="photo" style="display: block;"> ～略～ </div> <--! /写真を表示させるタブ --> <--! Google Map を表示させるタブ --> <div id="gmap" style="display: none;"> ～略～ <div id="inner"> <div id="map_canvas" style="width:600px; height:400px;"></div> ～略～ </div> </div> <--! /Google Map を表示させるタブ --> </body> -----------------------------------------------
- ベストアンサー
- JavaScript
- google maps APIのジオコーディング
google maps APIで2箇所の住所を入力し、ジオコーディングし、マーカーを表示させ、２箇所のマーカーの中間点が画面の中心になるように表示させたいのですが、なかなか地図の中心を移動できません。どのようにすればうまくできるでしょうか？ //HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> ジオコーディング</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> </head> <body onload="initialize()"> <div> 地点１<input id="start" type="textbox" size="50"><br> 地点２<input id="goal" type="textbox" size="50"> <input type="button" value="地図表示" onclick="codeAddress()"> </div> <div id="map_canvas" style="height:80%"></div> <br>地点１ <div id="geocoder_info" style="height:10%"></div> 地点２ <div id="geocoder_info2" style="height:10%"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script src="geocode.js"></script> </body> </html> //javascript geocode.js var map; var geocoder; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.699338,139.705146); var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map($("#map_canvas").get(0), myOptions); } function codeAddress() { var address = document.getElementById("start").value; var info = document.getElementById("geocoder_info"); geocoder.geocode( {'address': address},function(results, status) { info.innerHTML = results[0].formatted_address + "<br>" + results[0].geometry.location; if (status == google.maps.GeocoderStatus.OK) { Slat = results[0].geometry.location.lat(); Slng = results[0].geometry.location.lng(); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("次の理由でジオコーディングに失敗しました: " + status); } }); var address2 = document.getElementById("goal").value; var info2 = document.getElementById("geocoder_info2"); geocoder.geocode( { 'address': address2},function(results2, status2) { info2.innerHTML = results2[0].formatted_address + "<br>" + results2[0].geometry.location; if (status2 == google.maps.GeocoderStatus.OK) { Glat = results2[0].geometry.location.lat(); Glng = results2[0].geometry.location.lng(); var marker2 = new google.maps.Marker({ map: map, position: results2[0].geometry.location }); } else { alert("次の理由でジオコーディングに失敗しました: " + status); } }); latCenter = ((results[0].geometry.location.lat()) + (results2[0].geometry.location.lat()))/2; lngCenter = ((results[0].geometry.location.lng()) + (results2[0].geometry.location.lng()))/2; map.setCenter(latCenter,lngCenter); }
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 試してみます。