google map API Geocorder を使ってみた(その2)

map3

前回のgeocorderの使い方の続き。

地図で検索した結果の場所にマーカーを立てる方法をサラっとメモしておく。
ただ、検索結果によっては複数個所にマーカーが立つのだが、ちゃんと表示中の地図に抑えてやる必要があるので その辺りもふまえてエントリー

マーカーの置き方

マーカーをたてるのは非常に簡単。
画像の変更や、クリックしたときのポップアップは特に今回触れないので基本的な部分だけ。

google.maps.Markerクラスをnewするだけー
引数は、positionに緯度・軽度情報、 あとターゲットのmapを指定してやればマーカーがたつ。

new google.maps.Marker({  
      position: latlng, // 緯度経度
      map: map      // ターゲットとなるmapオブジェクト名を指定
});

boundsで複数マーカーを使う場合の地図の縮尺を自動で合わせる

とりあえずソース

// これは前回紹介したものとほぼ同じ。
function changeMap(){
   var address = document.getElementById("address").value;
   if(geocoder){
      var sendData = {'address':address, 'region':'jp'}
      geocoder.geocode( sendData,
         function(results, status){
            if(status == google.maps.GeocoderStatus.OK){
               map.setCenter(results[0].geometry.location);
               boundsAndMarked(results);     // 適当にマーカーひいて縮尺かえるメソッド追加
            }else{
               alert("Geocode get Error. Status => " + status);

            }
      });
   }
}

// 追加したメソッド
function boundsAndMarked(results){
   var bounds = new google.maps.LatLngBounds();  // boundsインスタンスを作っておく
   for(var i=0; i < results.length; i++){    // もらった位置情報分ループします
      if(results[i].geometry){
         var latlng = results[i].geometry.location;  // もらった地図の緯度・経度取得
         bounds.extend(latlng);  // bounds.extend()メソッドでいい感じに縮尺を変えてくれる
         map.fitBounds(bounds);  // HTMLに表示しているmapに対してfitBoundsメソッドで表示上の反映
         new google.maps.Marker({  // Markerクラスの引数に緯度・経度、表示したいmapを与えるとマーカーをひいいてくれる
            position: latlng,
            map: map
         });
      }
   }
}

まず、geocorder.geocode関数のコールバックで1件目の結果を地図のセンターに合わせている。

その後、各結果でマーカーをたてるためboundsAndMarkedっていうメソッドを勝手に作った。
概要は以下。

google.maps.LatLngBounds()

このオブジェクトに緯度経度情報を与えてやって、extendメソッドを使うと地図内にマーカーが収まるようにズームレベルを計算してくれるっぽい。

実際に地図に反映されるにはmap.fitBounds()メソッドを使う。

今、ふとおもったのだが全部の地図結果分ループでmap.fitBoundsしていいのかな。。
たぶん配列の最初の方が1件目からの距離順だった気がするので、問題なさそうだけど。。

boundsで地図の縮尺を変えた後、google.maps.Markerクラスでマーカーをたてている。

とりあえずこんな感じ。おわり。

2013-07-15 | Posted in googleAPIsNo Comments » 


関連記事

Comment





Comment



*