緯度と経度でサイトに地図を簡単表示「Latitude and Longitude picker」
当ページのリンクには広告が含まれています。
スポンサーリンク
緯度と経度を指定するだけでサイトに地図が表示できるプラグイン「Latitude and Longitude picker」を紹介します。
jQueryプラグイン「Latitude and Longitude picker」
jQueryプラグイン「Latitude and Longitude picker」は、緯度と経度、倍率を指定するだけでサイトに地図が表示できるプラグイン。
Googleが提供している「Google Geocoding API」とJavascriptライブラリ「OpenLayer」を利用して実装されています。
スポンサーリンク
デモをご覧ください。「Google Geocoding API」と「OpenLayer」のどちらも利用したことがない筆者ですが、簡単に地図を表示できました。さらに、地名の検索、緯度と経度の入力フォームも簡単に設置できます。
「Latitude and Longitude picker」のデモ
デモのソース（HTML + jQuery）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Latitude and Longitude Picker - jQueryまとめのプラグイン</title> <link rel="stylesheet" type="text/css" href="css/demo.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link rel="stylesheet" type="text/css" href="css/jquery-position-picker.css"/> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/OpenLayers.js"></script> <script src="js/jquery-position-picker.debug.js"></script> </head> <body> <h1>Latitude and Longitude Pickerのデモでーす。</h1> <h2>東京！</h2> <fieldset class="gllpLatlonPicker"> <div class="gllpMap"></div> <hr /> 検索：<input type="text" class="gllpSearchField"> <input type="button" class="gllpSearchButton" value="GO"><br/> <hr /> 緯度：<input type="text" class="gllpLatitude" value="35.681382"/><br/> 経度：<input type="text" class="gllpLongitude" value="139.766084"/><br/> 倍率：<input type="text" class="gllpZoom" value="13"/> <input type="button" class="gllpUpdateButton" value="Update Map" size="200px" /> <hr /> 場所：<input type="text" class="gllpLocationName" size="50px"/><br/> 高度：<input type="text" class="gllpElevation" size=12/>m </fieldset> </body> </html>
その他詳細はこちらからどうぞ。
» Odyno / jquery-position-picker
スポンサーリンク