住所や施設名で緯度・経度取得
住所や施設名を入力することで緯度・経度を取得する方法についてのブログ記事があったので自分も試しに作ってみた。
元記事
GoogleMapで住所などから位置を取得して表示する
自分が作成したものにはページを開いた際に現在位置の緯度と経度が取得できるようにしてみた。
<form>
<input id="latitude" type="text" value="" placeholder="緯度">
<input id="longitude" type="text" value="" placeholder="経度">
<input id="address" type="text" value="" placeholder="住所入力">
<input type="button" value="緯度経度表示" id="geocode">
</form>
<div id="map_canvas"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
$(function(){
var map;
var marker;
var geocoder;
if(navigator.geolocation){
navigator.geolocation.watchPosition(
function(position){
var gLat = position.coords.latitude;
var gLng = position.coords.longitude;
$("#latitude").val(gLat);
$("#longitude").val(gLng);
google.maps.event.addDomListener(window, 'load', initialize(gLat, gLng));
function initialize(gLat, gLng){
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(Number(gLat), Number(gLng))
};
map = new google.maps.Map($("#map_canvas")[0], mapOptions);
marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
geocoder = new google.maps.Geocoder();
}
}
);
}
$("#geocode").click(function(){
var address = $("#address").val();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var loc = results[0].geometry.location;
map.setCenter(loc);
marker.setPosition(loc);
$("#latitude").val(loc.lat());
$("#longitude").val(loc.lng());
}
});
});
});
GPSの搭載されていないノートパソコンでもWifiで現在位置の緯度と経度を取得できるがGPSよりも誤差があり、時間もかかる。
あとこの書き方だと現在位置を取得してGoogleマップが表示されるまで住所などで緯度・経度が検索できないのでPCだと使いづらい。
JavaScriptで住所などから経度と緯度を取得するサンプル
