google maps APIで住所から経緯度情報を取得ツール_技術三昧ブログ

ホーム » ブログ » google maps APIで住所から経緯度情報を取得ツール

@2012/08/22

「地名をご入力だけで、その場所の経緯度情報を表示するツール」作成しました。まずは「東京駅」をご入力し、「緯度と経度を取得する」ボタンを押してみてください（もちろん、その地名が存在するのを大前提です）。

先ほど「google maps APIから経度と緯度情報を取得」記事の中で、グーグルマップでクリックだけで経緯度情報を表示できるようにツールを公開しました。しかし、あくまではその位置をたどり着かないと、その場所の経緯度情報を取得できません。たとえば、「東陽町」の経緯度情報をお知りたい場合、地図を何回ズームインし地名を探す工夫がかかりますね。

本記事の「google maps APIで住所から経緯度情報を取得ツール」のサンプルとソースコードも公開します。必要な時ご自由に参考下さい。
【サンプル】住所を入力して、経緯度を取得できるツール

【ソースコード】

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>google経緯度API_API_タオバオツール_taobao.jp</title>
<meta name="description" content="Google maps経緯度APIです、住所を入力だけで経緯度情報を取得ツール。詳しく情報はタオバオツールAPIに関するページをご覧ください。">
<meta name="keywords" content="住所,経緯度,API,ツール,taobao">
<meta name="author" content="taobao.jp">
<link rel="shortcut icon" type="image/x-icon" href="http://www.zanmai.net/images/favicon.ico" />
   <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map { height: 500px }
    </style>
    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"　type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
    //<![CDATA[
    var map;
    var geo;
    function init() {

      // Google Mapディフォールト場所
      var latlng = new google.maps.LatLng(36, 138);
      var opts = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng
      };

      // getElementById("map")、地図の表示場所となる
      map = new google.maps.Map(document.getElementById("map"), opts);

      geo = new google.maps.Geocoder();

    }

    function buttonpress() {
      // GeocoderRequest
      var req = {
        address: document.getElementById("input").value,
      };
      geo.geocode(req, geoResultCallback);
    }

    function geoResultCallback(result, status) {
      if (status != google.maps.GeocoderStatus.OK) {
        alert(status);
        return;
      }

      var latlng = result[0].geometry.location;

      map.setCenter(latlng);

      var marker = new google.maps.Marker({position:latlng, map:map, title:latlng.toString(), draggable:true});

      google.maps.event.addListener(marker, 'dragend', function(event){
        marker.setTitle(event.latLng.toString());
      });
	//ご入力した場所とその場所の経緯度情報を表示する
      document.getElementById("latlngtext").innerHTML = document.getElementById("input").value + " : " + latlng.toString();
    }

    //]]>
    </script>
  </head>

  <body onload="init()">
    <div id="map" height="550px"></div>
    <div>ご住所 : <input id="input" onsubmit="buttonpress()" /><input type="button" onclick="buttonpress()" value="緯度と経度を取得する" /></div>
    <div id="latlngtext"></div>
  </body>
</html>

以上、メモーを

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/69.html

閉じる

google maps APIで住所から経緯度情報を取得ツール_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！