PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル - GMAPv3 - ジオコーディング

指定した住所の緯度・経度を取得し、その位置にマーカーを立て、取得した情報を情報ウィンドウで表示します。

設置サンプルのソース

<!DOCTYPE html> 
<html lang="ja">
<head>
   <meta charset="utf-8" />
   <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
   <title>設置サンプル - GMAPv3 - ジオコーディング</title>
   <!-- スマートフォン向けviewportの指定 -->
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <!-- jQuery -->
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   <!-- Google Maps APIの読み込み -->
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
   <script type="text/javascript">
      var geocoder, map;
       /* 地図上に追加されたオーバーレイを格納する配列 */
      var overlays = [];
      $(function(){
         initialize();
         $("#btn").bind("click",function(){
            codeAddress();
         }).trigger("click");
      });
      /* 地図の初期化 */
      function codeAddress() {
         var address=$("#address").val();
         geocoder.geocode( { 'address': address, 'language': 'ja'}, function(results, status) {
            if(status==google.maps.GeocoderStatus.OK){
               /* オーバーレイ消去 */
               if(overlays.length>0){
                  for(i in overlays){
                     overlays[i].setMap(null);
                  }
                  overlays.length=0;
               }
               /* 地図の中心点を変更 */
               map.setCenter(results[0].geometry.location);
               /* 指定された境界に合うように地図を表示 */
               if(results[0].geometry.bounds)map.fitBounds(results[0].geometry.bounds);
               if(results[0].geometry.viewport)map.fitBounds(results[0].geometry.viewport);
               /* マーカー */
               var marker = new google.maps.Marker({
                  map:map,
                  position: results[0].geometry.location
               });
               var contentString="";
               contentString+="◆住所<br> "+address+"<br>";
               contentString+="◆緯度・経度<br> "+results[0].geometry.location.toUrlValue()+"<br>";
               contentString+="◆位置タイプ<br> "+results[0].geometry.location_type+"<br>";
               contentString+="◆正確な境界<br> "+results[0].geometry.bounds+"<br>";
               contentString+="◆推奨されるviewportの境界<br> "+results[0].geometry.viewport+"<br>";
               contentString+="◆結果のジオコード要素タイプ<br>";
               for(var i in results[0].types){
                  contentString+=" "+results[0].types[i]+"<br>";
               }
               /* 情報ウィンドウ */
               infowindow=new google.maps.InfoWindow({
                   content: contentString,
                   maxWidth: 250
               });
               infowindow.open(map, marker);
               overlays=[marker, infowindow]
            }else{
               alert("ジオコードの取得に失敗しました\n"+status);
            }
         });
         return false;
      }
      function initialize(){
         /* ジオコードオブジェクト */
         geocoder = new google.maps.Geocoder();
         /* 緯度・経度:日本 */
         var myLatlng=new google.maps.LatLng(36.204824,138.252924);
         /* 地図のオプション設定 */
         var myOptions={
            /*初期のズーム レベル */
            zoom: 2,
            /* 地図の中心点 */
            center: myLatlng,
            /* 地図タイプ */
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         /* 地図オブジェクト */
         map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }
   </script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
   <h1>設置サンプル - GMAPv3 - ジオコーディング</h1>
   <p>   指定した住所の緯度・経度を取得し、その位置にマーカーを立て、取得した情報を情報ウィンドウで表示します。</p>
   <form onsubmit="return false;">
      <input type="text" id="address" value="東京タワー" />
      <input type="button" id="btn" value="住所から緯度・経度を取得" />
   </form>
   <!-- 地図の埋め込み表示 -->
   <div id="map_canvas"></div>
</body>
</html>