東京都府中市のWEB制作会社Maromaroのブログです

  • TOP
  • Web制作
  • 【JavaScript】GoogleMapや地名検索をページに埋め込んで位置情報を取得する方法

2018.02.26

hoshida

【JavaScript】GoogleMapや地名検索をページに埋め込んで位置情報を取得する方法

  • このエントリーをはてなブックマークに追加

埋め込んだGoogle Map上をクリックしたり、地名で検索するなどして、最終的に任意の地点の位置情報を取得する方法です。Google Maps APIを利用します。

サンプル

まずはサンプルをご覧ください。
サンプルページ

念の為キャプチャーも載せておきます。

キーワード検索窓と埋め込みGoogel Map、そして緯度経度の値を表示します。検索ボタンを押すと入力された場所のMapが表示されます。またMap上をクリックするとピンがその位置に移動し、また緯度経度の値もクリックした位置に変化します。

コード

HTML

  <p>住所や駅名、目印などで検索できます。</p>
  <form onsubmit="return false;">
    <input type="text" value="株式会社Maromaro" id="address">
    <button type="button" value="検索" id="map_button">検索</button>
  </form>
  <!-- 地図を表示させる要素 -->
  <div class="map_box01"><div id="map-canvas" style="width: 500px;height: 350px;"></div></div>
  
  <p>マーカーのある位置の<br>
  緯度 <input type="text" id="lat" value=""><br>
  経度 <input type="text" id="lng" value=""><br>
  地図上をクリックするとマーカーを移動できます。</p>
  
  <!-- APIを取得 -->
  <script type="text/javascript" src="//maps.google.com/maps/api/js?key=AIPのキー"></script>

JS

    var getMap = (function() {
      function codeAddress(address) {
        // google.maps.Geocoder()コンストラクタのインスタンスを生成
        var geocoder = new google.maps.Geocoder();
    
        // 地図表示に関するオプション
        var mapOptions = {
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
    
        // 地図を表示させるインスタンスを生成
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        
        //マーカー変数用意
        var marker;
        
        // geocoder.geocode()メソッドを実行 
        geocoder.geocode( { 'address': address}, function(results, status) {
          
          // ジオコーディングが成功した場合
          if (status == google.maps.GeocoderStatus.OK) {
            
            // 変換した緯度・経度情報を地図の中心に表示
            map.setCenter(results[0].geometry.location);
            
            //☆表示している地図上の緯度経度
            document.getElementById('lat').value=results[0].geometry.location.lat();
            document.getElementById('lng').value=results[0].geometry.location.lng();
            
            // マーカー設定
            marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
            });
          
          // ジオコーディングが成功しなかった場合
          } else {
            console.log('Geocode was not successful for the following reason: ' + status);
          }
        
        });
        
        // マップをクリックで位置変更
        map.addListener('click', function(e) {
          getClickLatLng(e.latLng, map);
        });
        function getClickLatLng(lat_lng, map) {
          
          //☆表示している地図上の緯度経度
          document.getElementById('lat').value=lat_lng.lat();
          document.getElementById('lng').value=lat_lng.lng();
            
          // マーカーを設置
          marker.setMap(null);
          marker = new google.maps.Marker({
            position: lat_lng,
            map: map
          });
        
          // 座標の中心をずらす
          map.panTo(lat_lng);
        }
      
      }
      
      //inputのvalueで検索して地図を表示
      return {
        getAddress: function() {
          // ボタンに指定したid要素を取得
          var button = document.getElementById("map_button");
          
          // ボタンが押された時の処理
          button.onclick = function() {
            // フォームに入力された住所情報を取得
            var address = document.getElementById("address").value;
            // 取得した住所を引数に指定してcodeAddress()関数を実行
            codeAddress(address);
          }
          
          //読み込まれたときに地図を表示
          window.onload = function(){
            // フォームに入力された住所情報を取得
            var address = document.getElementById("address").value;
            // 取得した住所を引数に指定してcodeAddress()関数を実行
            codeAddress(address);
          }
        }
      
      };
    
    })();
    getMap.getAddress();

解説

基本的には以下の3つの機能でできています。
・位置情報(緯度経度の値)をもとにGoogleMapを表示する
・テキストフィールドに入力された文字で検索して位置情報を取得する
・Map上をクリックして位置を取得し、Mapを再描画する

Mapの仕様は「地図表示に関するオプション」の部分でカスタマイズできます。オプションの内容はGoogle Maps APIのドキュメントで確認できます。
Maps JavaScript API コントロール

また、APIの取得には本来APIキーが必要ですので、キーを取得してAPIへのリンクにパラメーターとして追加しましょう。キーは以下から取得できます。
Maps JavaScript API キーの取得、認証

やや昔に書いたコードなので解説が雑ですみません。(^^;)

位置情報を使用したサービスを開発した際、位置情報を取得できないPCなどの端末で閲覧したときにユーザーが任意の位置を設定できるようにするため作成した仕組みです。

ちなみにそのサービスは、このコードで取得した位置情報を使って現在地の周囲のお店を検索するという代物でした。CakePHPですが現在地と半径から座標を絞り込む方法は以下の記事に書いています。

参考にした記事
Maps JavaScript API コントロール
Google Maps JS APIを使って「住所から緯度経度を取得し地図を検索する」機能を実装する方法
Google Maps JavaScript API でクリックした座標の取得
Javascriptで入力した住所から緯度経度を取得してフォームに入力する方法

  • このエントリーをはてなブックマークに追加