2017-04-17 15 views
-1

私はこのサイトの全部を検索し、不運な答えを見つけました。 latとlngのマーカーがあり、配列インデックスに基づいて情報ウィンドウを開きたいと思います。私は、配列リストではなく変数でマーカを置き換えて動作させましたが、コードをDRYにしておきたいと思います。ここに私のコードは次のとおりです。オブジェクトリテラル:Google Maps API配列から複数の情報ウィンドウを呼び出す

function initMap() { 
    var locations = [ 
     ["blairCountyPA", 40.453132, -78.384223], 
     ["scrantonPA", 41.408969, -75.662412], 
     ["warringtonTownshipPA", 40.250319, -75.166212], 
     ["lancasterCountyPA", 40.046657, -76.178374], 
     ["berkeleyCountyWV", 39.488560, -78.065193], 
     ["bowieMD", 39.006777, -76.779136], 
     ["anneArundelCountyMD", 38.953011, -76.548823], 
     ["shenandoahVA", 38.483457, -78.849748], 
     ["calvertCountyMD", 38.494950, -76.502574], 
     ["salsiburyMD", 38.360674, -75.599369], 
     ["berlinMD", 38.322615, -75.217689], 
     ["ocMD", 38.336503, -75.084906], 
     ["lynchburgVA", 37.413754, -79.142246] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 7, 
     center: new google.maps.LatLng(39.488560, -78.065193) 
    }); 

    for(var i = 0; i < locations.length; i++) { 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      icon: 'images/pin-cloud.png', 
      animation: google.maps.Animation.DROP, 
      map: map  
     }); 
    } 

    var blairCountyContentString = 
    '<div id="content">'+ 
    '<div id="siteNotice">'+ 
    '</div>'+ 
    '<h1 id="firstHeading" class="firstHeading">Blair County, PA</h1>'+ 
    '<div id="bodyContent">'+ 
    "<p>insert info here</p>" + 
    '<p><b>Resources</b>: <a href="https://efc.umd.edu/assets/sw_case_studies/blair_county_final.pdf" <span>Case Study Blair County, PA</span> </a></p>'+ 
    '</div>'+ 
    '</div>'; 

    var blairCountyInfowindow = new google.maps.InfoWindow({ 
     content: blairCountyContentString, 
     position: locations[0] 
    }); 

    marker.addListener('click', function() { 
     blairCountyInfowindow.open(map, marker); 
    }); 

私の問題は、「場所が[0]の位置」にあるように思われます。時には、これはlng、latの数値である必要があるというエラーが表示されます...運が無ければそれを試みました。ウィンドウは現在開いていますが、配列の最後のインデックスだけが開きます。何か案は?

答えて

0

更新されたコードを参照してください。今、私のために働いていないと、上から二番目のピンはブレア郡であるので、それはフィドルの右働いていない情報ウィンドウコンテンツ

Fiddle link

function initMap() { 
    var marker = []; 
    var locations = [ 
    ["blairCountyPA", 40.453132, -78.384223], 
    ["scrantonPA", 41.408969, -75.662412], 
    ["warringtonTownshipPA", 40.250319, -75.166212], 
    ["lancasterCountyPA", 40.046657, -76.178374], 
    ["berkeleyCountyWV", 39.488560, -78.065193], 
    ["bowieMD", 39.006777, -76.779136], 
    ["anneArundelCountyMD", 38.953011, -76.548823], 
    ["shenandoahVA", 38.483457, -78.849748], 
    ["calvertCountyMD", 38.494950, -76.502574], 
    ["salsiburyMD", 38.360674, -75.599369], 
    ["berlinMD", 38.322615, -75.217689], 
    ["ocMD", 38.336503, -75.084906], 
    ["lynchburgVA", 37.413754, -79.142246] 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 7, 
    center: new google.maps.LatLng(39.488560, -78.065193) 
    }); 

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

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     var ContentString = 
     '<div id="content">' + 
     '<div id="siteNotice">' + 
     '</div>' + 
     '<h1 id="firstHeading" class="firstHeading">' + locations[i][0] + '</h1>' + 
     '<div id="bodyContent">' + 
     "<p>insert info here</p>" + 
     '<p><b>Resources</b>: <a href="https://efc.umd.edu/assets/sw_case_studies/blair_county_final.pdf" <span>Case Study ' + locations[i][0] + '</span> </a></p>' + 
     '</div>' + 
     '</div>'; 
     return function() { 
     infowindow.setContent(ContentString); 
     infowindow.open(map, marker); 
     } 
    })(marker, i)); 
    } 
} 
+0

をカスタマイズします。最後のピンではありません...なぜ、配列内の "blairCountyPA"を削除する必要がありますか?それが私がどのピンであるかを知る方法です。私はその配列から選択できませんでしたか?うーん、おそらく私はこれについて誤って考えている。配列を入れ子にしたときにどのようにインデックスが作成されているのか分からないので、配列が設定されている方法と関係があると思います。 – Nick0989

+0

更新コードを今すぐチェック –

+0

Nice dude!それは非常に感謝しています。あなたに投票してください。 – Nick0989

関連する問題