<!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>
4) Google Maps JavaScript API で MAP 表示
制限事項
Google Chrome ては、PC でも スマホでも、現在地取得には https を使うか localhost でないと動作しません。( 他のブラウザでは今のところ動作しているようですが、将来的には同じになる可能性があります )
事実、現在 Yahoo の雨雲ズームレーダでは、Chrome では現在位置が取れません。
通常のサイトで使用して、PC の開発者ツールで表示すると、以下のようにメッセージが出ます
もし、他所で使用しようとすると以下のようになります
デモのソースコード
一番上のブルーのメニューは、ログアウトや関連リンクをセットしてあります。下の黒いバーが jQuery UI のアコーディオンを使用して Google Plus の投稿データを表示しています。
▼ 実際のデモページです。
一番上は、最初から設定済みのメニューで、ログアウトや関連リンクをセットしてあります。下の3つが実際にタスクリストに登録した内容をタイトルだけ設定しています。
▼ 通常のログイン(ログイン状態を保持する為のチェックボックスがあります )
▼ 認証画面
▼ 実際のデモページです。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
