Google Maps API - 複数の情報ウィンドウと自動センタリング

Question

インターネット（StackOverflowを含む）のさまざまなコードを一緒に使っています。ほとんどの場合、配列からポストコードをジオコードする作業マップがあります各自のインフォーワード・ウィンドウ。

2つの問題：

1）常に最後の配列値

2を使用し、別のアレイから自分のテキストを取るべきである私の情報ウィンドウ、）私はマップが自動的に中央に取得することはできません。私は他の状況で働いているコードのビットを使用していますが、私のコードではありません。

コードはかなり自明です：

var geocoder = new google.maps.Geocoder(); 

var map = new google.maps.Map(document.getElementById('map'), { 
    //zoom: 10, 
    //center: new google.maps.LatLng(-33.92, 151.25), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var postcodes = [ 
    "EH14 1PR", 
    "KY7 4TP", 
    "IV6 7UP" 
]; 

var descriptions = [ 
    "Slateford", 
    "Cortachy", 
    "Marybank" 
]; 

var markersArray = []; 

var infowindow = new google.maps.InfoWindow(); 

var marker, i, address, description; 

for(var i = 0; i < postcodes.length; i++) { 
    address = postcodes[i]; 
    description = descriptions[i]; 
    geocoder.geocode(
     { 
      'address': address, 
      'region' : 'uk' 
     }, 
     function(results, status){ 
      if (status == google.maps.GeocoderStatus.OK) { 
       marker = new google.maps.Marker({ 
        position: results[0].geometry.location, 
        map: map 
       }); 
       markersArray[i] = marker; 
       console.log(markersArray[i]); 
       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         infowindow.setContent(description); 
         infowindow.open(map, marker); 
        } 
       })(marker, i)); 
      } else { 
       alert("Geocode was not successful for the following reason: " + status); 
       return false; 
      } 
     } 
    ); 

    var bounds = new google.maps.LatLngBounds(); 

    $.each(markersArray, function (index, marker) { 
     bounds.extend(marker.position); 
    }); 

    map.fitBounds(bounds); 
    console.log(bounds); 
} 

任意の考え？この問題は、ジオコード機能内のカウンタiの値と思われます。

ご迷惑をおかけして申し訳ありません。

Answer 1

1）他の配列からそのテキストを取るべきである私の情報ウィンドウ、 は常に最後の配列値

2を使用する）私はにマップを取得することはできません自動的にセンタリングします。他の状況で働いていた コードのビットを使用していますが、私の コードではありません。

1）はい、これはクロージャの問題です。これが私の周りを回る方法です。

私が使用するすべてのプロパティを格納するオブジェクトを作成します。あなたの例では、postcodeとdescriptionを使用します。

function location(postalcode, desc){ 
    this.PostalCode = postalcode; 
    this.Description = desc; 
} 

は今、アレイにすべてlocationオブジェクトを追加するための簡単なループを実行します。

var locations = []; 
for(var i = 0; i < postcodes.length; i++) { 
    locations.push(new location(postcodes[i], descriptions[i])); 
} 

locationオブジェクトを取るために、パラメータを持つ独自の機能にジオコード機能を抽出します。次に、locationオブジェクト配列をループし、それぞれ個別にジオコードすることができます。したがって、リクエストが作成されて送信されると、ポストコードと説明の両方が有効範囲に入ります。

function GeoCode(singleLocation){ 
    geocoder.geocode(
     { 
      'address': singleLocation.PostalCode, 
      'region' : 'uk' 
     }, 
     function(results, status){ 
      if (status == google.maps.GeocoderStatus.OK) { 
       var marker = new google.maps.Marker({ 
        position: results[0].geometry.location, 
        map: map 
       }); 

       //quick and dirty way 
       bounds.extend(marker.position); 
       map.fitBounds(bounds);      

       markersArray[i] = marker; 
       console.log(markersArray[i]); 

       google.maps.event.addListener(marker, 'click', function() { 
         infowindow.setContent(singleLocation.Description); 
         infowindow.open(map, this); //this refers to the marker 
       }); 

      } else { 
       alert("Geocode was not successful for the following reason: " 
         + status); 
       return false; 
      } 
     } 
    ); 
} 

2）あなたが速い上に延びとジオコードのためのコールバック関数の内部の境界にフィットされ、これを行うための汚いやり方を見ることができるように。これにより、fitBounds関数が複数回呼び出され、数個のマーカーしかない場合は大きな問題にはなりませんが、数百または数千のマーカーがある場合は問題が発生します。その場合、右のは、非同期ループ機能を作成することです。その例はmy previous answersのいずれかで確認できます。

ここにはfunctioning example of the code based on your exampleがあります。

Answer 2

2つの問題：

1）他の配列からそのテキストを取るべきである私の情報ウィンドウ、 は常に最後の配列値

2を使用して）私は、中心にマップを取得することはできません自動的に。他の状況で働いていた コードのビットを使用していますが、私の コードではありません。

回答：

1）最も可能性の高いあなたがここにclosure問題を持っているためです。 -33.92の緯度と151.25の経度にマップするために中心に説明するこの行にコメントを削除する 、）

2）センターは、マップの中心点を定義しますが、あなたのコードでは、あなたがこの //center: new google.maps.LatLng(-33.92, 151.25をコメントしています。以下
用途：

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: new google.maps.LatLng(-33.92, 151.25), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
});