緯度・経度関連で、4つの機能を実装したデモページです※ この デモは https でアクセスしますが、http でもアクセスできるので注意して下さい ※ http でアクセスした場合、Google Chrome では現在地を取得できません 1) navigator.geolocation.getCurrentPosition でブラウザの現在位置を取得 2) ライブラリ(DmGeocorder) を使用して緯度・経度から場所情報を取得 3) Google の API の geocoder.geocode で 住所・名前から緯度・経度を取得
4) Google Maps JavaScript API で MAP 表示 制限事項 Google Chrome ては、PC でも スマホでも、現在地取得には https を使うか localhost でないと動作しません。( 他のブラウザでは今のところ動作しているようですが、将来的には同じになる可能性があります ) 事実、現在 Yahoo の雨雲ズームレーダでは、Chrome では現在位置が取れません。 通常のサイトで使用して、PC の開発者ツールで表示すると、以下のようにメッセージが出ます
getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.DmGeocorder は、自分でサーバに準備して使うものです。ですが、とりあえずデモ内で使用しているものに関して外部からの使用制限は設けていません。 Google Maps JavaScript API は、API コンソールで登録した APIKEY を使用し、使用するドメインを登録しているので他所では使用できません。もし、他所で使用しようとすると以下のようになります
デモのソースコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body,input {
font-family: "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Verdana,Arial,Helvetica,sans-serif;
font-size: 16px;
}
a {
color: navy;
}
#target_area {
width: 600px;
height: 480px;
}
#address {
margin-bottom: 10px;
width: 450px;
}
@media screen and (max-width:774px) {
#target_area {
width: 100%;
}
#address {
width: 250px;
}
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// *************************************
// 初期位置
// *************************************
var lat = 34.7013233;
var lng = 135.4966954;
var geo = null;
$(function(){
// *************************************
// 現在位置を取得してマップに反映する
// *************************************
$("#getcur").on("click",function(){
// *************************************
// Chrome では、この実行には https か
// localhost である必要があります
// *************************************
navigator.geolocation.getCurrentPosition(function(target){
geo = target;
console.dir(target);
var obj = {};
for( value in target.coords ) {
obj[value] = target.coords[value];
}
// ブラウザの geolocation で取得した内容
$("#latlng").text( JSON.stringify(obj,null," ") );
lat = geo.coords.latitude;
lng = geo.coords.longitude;
// Google MAP の再表示
loadMap(document,"target_area",lat,lng,15);
// サーバーのライブラリから場所情報を取得
$.get("https://lightbox.sakura.ne.jp/toolbox/g_ken.php?lat="
+geo.coords.latitude
+"&lng="
+geo.coords.longitude,
function(data){
console.dir(data);
$("#latlng2").text( JSON.stringify(data,null," ") );
}
);
});
});
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQq2Yaz_ue8jVhf2LAQBlE73RJ17jd0tM"></script>
<script>
var geocoder = new google.maps.Geocoder();
var map;
$(function(){
// *************************************
// 住所・名前から位置情報を取得
// *************************************
$("#geo_action").on("click",function(){
geocoder.geocode( {'address': $("#address").val()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// lat と lng
console.log(results[0].geometry.location.lat(),results[0].geometry.location.lng());
// *************************************
// サーバーのライブラリから場所情報を取得
// *************************************
$.get("https://lightbox.sakura.ne.jp/toolbox/g_ken.php?lat="
+results[0].geometry.location.lat()
+"&lng="
+results[0].geometry.location.lng(),
function(data){
console.dir(data);
$("#latlng2").text( JSON.stringify(data,null," ") );
}
);
}
else {
alert("Geocode が失敗しました : " + status);
}
});
});
});
// *************************************
// Google MAP の表示
// *************************************
function loadMap(doc,obj_str,a,b,c) {
var latlng = new google.maps.LatLng(a,b);
var myOptions = {
zoom: c,
center: latlng,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE
],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.HYBRID,
scaleControl: true
};
map = new google.maps.Map(doc.getElementById(obj_str),myOptions);
}
// *************************************
// 最初の Google MAP の表示
// *************************************
google.maps.event.addDomListener(window, 'load', function () {
loadMap(document,"target_area",lat,lng,15);
});
</script>
</head>
<body>
住所 <input type="text" id="address"> <input type="button" id="geo_action" value="実行">
<div id='target_area'></div>
<br><br>
<input type="button" id="getcur" value="現在位置を取得してマップに反映する">
<br>
▼ ブラウザの geolocation で取得した内容
<pre id="latlng"></pre>
▼ <a target="_blank" href="https://github.com/demouth/DmGeocoder">ライブラリ</a>より取得した場所情報
<pre id="latlng2"></pre>
</body>
</html>
以下のツールで、スマホで簡単に URL を送る事ができます。
|
|
【Googleの最新記事】
- Google 共有ドライブの容量の上限について
- Google Classroom は無料の G Suite for Education アカウントが必要
- 教室と一対一のフォルダより新しく登録されたフォルダの中にあるZoom動画ファイルを該当するClassroom の コース内の該当するトピックに登録する
- Google Apps Script : 動画を添付して Classroom の指定のトピックへ課題として投稿する
- Google Classroom のテーマ画像のサイズと既存画像をテーマ画像として使用してみた手順
- Google Chrome でスマホのソースコードをごく普通に表示して利用する
- Gmail に 実行可能なファイルの拡張子を持つファイルを格納した zip 書庫は送れません
- Gmail で添付できないファイルをエクスプローラで検索する為の文字列
- jQuery で既存 table より Firebase Database のデータを作成する
- jQuery + Bootstrap(css) + mmenu : Firebase Database 参照と更新サンプル( 新規登録テンプレートより )
- jQuery + Bootstrap(css) + mmenu : Firebase Database 新規登録テンプレート
- jQuery + Bootstrap(css) + mmenu : Firebase ログインテンプレート
- Google ドライブの WEBホスティングが無くなったので、Google の Firebase をとりあえず使う方法
- Google サイト内検索の FORM 要素による設置
- Google+ に投稿するテキスト内の文字列を太字(ボールド)にしたりイタリックにしたりする方法
- Google の Plus API を使って Google+ 投稿データを jQuery UI のアコーディオン(accordion)で表示する
- Google の タスク API(ToDoリスト) を使ってタスクリストとタスクのタイトルを jQuery のプラグインでメニュー化する
- Google API の中でも単純な Task API を使って、アクセストークン取得のテンプレートを整備しました
- GitHub の google-api-php-client( PHP ) を使って、Gmail でメールを送る( 添付ファイル付き )
- GitHub の google-api-php-client( PHP ) を使って、Gmail でメールを送る
