ただのSEの備忘録

技術からニュース、くだらない雑学まで何でもまとめるブログ

*

googlemapAPIを使って簡単に緯度経度を取得できるHTMLを作成してみた

   


以前「googlemapAPIについてしらべてみた」でAPIの紹介をしましたが、今回は実際にgooglemapAPIを使って、誰でも簡単に地図を使えるようにデモを用意しました。

今回は地図から緯度経度を取得するHTMLになります。

HTML以外はファイル内に記述したり、外部からプラグインを呼び出すため、1ファイルのみで動く簡単なものとなります。

 

デモを見る

スポンサードリンク

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地図から緯度経度取得</title>
<meta name="description" content="地図、マップから指定した箇所の緯度経度を取得します。日本測地系、世界測地系、ミリ秒、DMS、DEG表示に対応します">
<meta name=”keywords” content=”緯度経度取得、ミリ秒、地図、マップ”>
</head>
<body>

<!-- css -->
<style>
html,body{
height: 100%;
margin: 0;
padding: 0;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,メイリオ,sans-serif;
}
h2{
margin: 10px 0 5px;
border-left: 3px solid #FFF;
padding-left: 5px;
}
h3{
margin: 5px 0 0px;
}
.wrap{
overflow: hidden;
height: 100%;
}
#map{
height: 100%;
}
.main{
width: 100%;
height: 100%;
margin-right: -300px;
}
.sub{
width: 300px;
height: 100%;
background-color: #1BA399;
color: #FFF;
overflow-y: scroll;
}
.value{
padding: 10px;
height: 100%;
}
.left{
float:left;
}
.right{
float:right;
}
.clear{
clear:both;
}
</style>
<div class="wrap">
<div class="sub left">
<div class="value">
<h2>住所検索</h2>
<form id="addressForm">
<input type="text" id="place" name="place" placeholder="住所・駅・施設・〒">
</form>
<div id="addressResult"></div>
<h2>世界測地系</h2>
<h3>ミリ進法</h3>
<div id="w_milli_i">緯度=</div>
<div id="w_milli_k">経度=</div>
<h3>10進法</h3>
<div id="w_10_i">緯度=</div>
<div id="w_10_k">経度=</div>
<h3>度分秒(60進法)</h3>
<div id="w_dohun_i">緯度=</div>
<div id="w_dohun_k">経度=</div>
<h2>日本測地系</h2>
<h3>ミリ進法</h3>
<div id="j_milli_i">緯度=</div>
<div id="j_milli_k">経度=</div>
<h3>10進法</h3>
<div id="j_10_i">緯度=</div>
<div id="j_10_k">経度=</div>
<h3>度分秒(60進法)</h3>
<div id="j_dohun_i">緯度=</div>
<div id="j_dohun_k">経度=</div>
<h2>検索(世界測地)</h2>
<form id="form">
<input type="text" id="lat" name="lat" placeholder="緯度">
<input type="text" id="lon" name="lon" placeholder="経度">
<div>
<input type="radio" name="coordType" value="w_10" checked>10進数
<input type="radio" name="coordType" value="w_milli">ミリ秒
<input type="radio" name="coordType" value="w_dohun">度分秒
</div>
</form>
</div>
</div>
<div class="main">
<div id="map"></div>
</div>
</div>
<!-- script -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
$(document).ready(function(){
CTL.init();
$('input,textarea[readonly]').not($('input[type="button"],input[type="submit"]')).keypress(function (e) {
if (!e) var e = window.event;
if (e.keyCode == 13){
return false;
}
});
$("#form input").change(function(){
CTL.search();
});
$("#addressForm input").keyup(function(){
CTL.searchAddress();
});
});
var CTL = {
param:{
limit:60,
offset:0
},
variable:{
mapArea:"map",
lat: 35.697456,
lng: 139.702148
},
init:function(){
var opt = {
zoom: 5,
center: new google.maps.LatLng(CTL.variable.lat,CTL.variable.lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggableCursor: "crosshair"
};
MDL.createMap(document.getElementById(CTL.variable.mapArea),opt);
google.maps.event.addListener(MDL.variable.map, 'click', function(event){
CTL.renderCoord(event.latLng.lat(),event.latLng.lng());
MDL.makeMarker(event.latLng.lat(),event.latLng.lng());
});
CTL.renderCoord(CTL.variable.lat,CTL.variable.lng);
MDL.makeMarker(CTL.variable.lat,CTL.variable.lng);
},
search: function(){
var latlng = new google.maps.LatLng(CTL.variable.lat,CTL.variable.lng);
if(MDL.variable.marker == undefined){
var mopts = {
position: latlng,
map: MDL.variable.map
};
MDL.variable.marker = new google.maps.Marker(mopts);
}

var lat = $("#lat").val();
var lon = $("#lon").val();
var coordType = $('input[name="coordType"]:checked').val();
if(lon == "" || lat == ""){
return;
}
if(coordType == "w_milli"){
lon = MDL.shapingMilliTo10(lon);
lat = MDL.shapingMilliTo10(lat);
}else if(coordType == "w_dohun"){
lon = MDL.shapingDohunTo10(lon);
lat = MDL.shapingDohunTo10(lat);
}
latlng = new google.maps.LatLng(lat,lon);
MDL.variable.marker.position = latlng;
MDL.variable.marker.setMap(MDL.variable.map);
MDL.variable.map.panTo(latlng);
},
searchAddress: function(){
if($("#place").val() == ""){
latlng = new google.maps.LatLng(CTL.variable.lat,CTL.variable.lng);
MDL.variable.marker.position = latlng;
// 検索結果地が含まれるように範囲を拡大
MDL.variable.marker.setMap(MDL.variable.map);
MDL.variable.map.panTo(latlng);
$("#addressResult").text("");
return;
}
new google.maps.Geocoder().geocode({
address: $("#place").val()
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
// 範囲を移動
CTL.renderCoord(results[0].geometry.location.k,results[0].geometry.location.B);
MDL.makeMarker(results[0].geometry.location.k,results[0].geometry.location.B);
latlng = new google.maps.LatLng(results[0].geometry.location.k,results[0].geometry.location.B);
MDL.variable.marker.position = latlng;
// 検索結果地が含まれるように範囲を拡大
MDL.variable.marker.setMap(MDL.variable.map);
MDL.variable.map.panTo(latlng);
$("#addressResult").text(results[0].formatted_address);
}
});
},
renderCoord: function(lat,lon){
//世界測地
$("#w_milli_i").text("緯度=" + MDL.shapingMilli(lat));
$("#w_milli_k").text("経度=" + MDL.shapingMilli(lon));
$("#w_10_i").text("緯度=" + lat);
$("#w_10_k").text("経度=" + lon);
$("#w_dohun_i").text("緯度=" + MDL.shapingDohun(lat));
$("#w_dohun_k").text("経度=" + MDL.shapingDohun(lon));
var coord = {};
coord.lat = lat;
coord.lon = lon;
coord = MDL.shapingWtoJ(coord);
//日本測地
$("#j_milli_i").text("緯度=" + MDL.shapingMilli(coord.lat));
$("#j_milli_k").text("経度=" + MDL.shapingMilli(coord.lon));
$("#j_10_i").text("緯度=" + coord.lat);
$("#j_10_k").text("経度=" + coord.lon);
$("#j_dohun_i").text("緯度=" + MDL.shapingDohun(coord.lat));
$("#j_dohun_k").text("経度=" + MDL.shapingDohun(coord.lon));
}
};

var MDL = {
variable : {
},
setVariable : function(map) {
for ( var key in map) {
MDL.variable[key] = map[key];
}
},
getVariable : function(key) {
if(key != undefined){
return MDL.variable[key];
}else{
return MDL.variable;
}
},
createMap: function(mapArea,opt){
MDL.variable.map = new google.maps.Map(mapArea, opt);
},
makeMarker: function(lat,lon){
if(MDL.variable.marker != undefined){
MDL.variable.marker.setMap(null);
}
var latlng = new google.maps.LatLng(lat,lon);
var mopts = {
position: latlng,
map: MDL.variable.map
};
MDL.variable.marker = new google.maps.Marker(mopts);
},
shapingMilli: function(coord){
return parseInt(coord * 3600000);
},
shapingMilliTo10: function(coord){
return coord / 3600000;
},
shapingDohun: function(coord){
var d = parseInt(coord);
var h = parseInt((coord - d) * 60);
var b = parseInt((((coord - d) * 60) - h) * 60 * 1000) / 1000;
return d + "." + h + "." + b;
},
shapingDohunTo10: function(coord){
var list = coord.split(".");
return parseFloat(list[0]) + parseFloat(list[1]/60) + (parseFloat(list[2] + "." + list[3])/3600);
},
shapingWtoJ: function(coord){
var lat = coord.lat + 0.00010696 * coord.lat - 0.000017467 * coord.lon - 0.0046020;
var lon = coord.lon + 0.000046047 * coord.lat + 0.000083049 * coord.lon - 0.010041;
var map = {};
map.lat = lat;
map.lon = lon;
return map;
}
};
</script>
</body>
</html>

 

デモを見る

 - GoogleMapAPI, web, 未分類