Dynamic google map InfoWindowループ内の最後のレコードのコンテンツをロードしています

私のポップアップ（マーカがクリックされたとき）の内容が私の最後のレコードの内容を表示している問題があります。Dynamic google map InfoWindowループ内の最後のレコードのコンテンツをロードしています

私は助けのビットを見つけましたhere、しかし私はまだ問題があります。

はここに私のコードです

collection.js

[ 
{ 
    "lat": "-25.363882", 
    "lng": "131.044922", 
    "category": "cat1", 
    "title": "Heading #1", 
    "description": "desc1", 
    "imageurl": "http://ursispaltenstein.ch/blog/images/uploads_img/national_geographic_wallpaper_1.jpg", 
    "pageLink": "http://www.google.com" 
}, 
{ 
    "lat": "-26.363882", 
    "lng": "200.044922", 
    "category": "cat2", 
    "title": "Heading #2", 
    "description": "desc2", 
    "imageurl": "http://www.creativepics.org/wp-content/uploads/2009/10/National-Geographic-Wallpapers-002.jpg", 
    "pageLink": "http://www.google.com" 
} 
, 
{ 
    "lat": "-28.363882", 
    "lng": "81.044922", 
    "category": "cat3", 
    "title": "Heading #3", 
    "description": "desc3", 
    "imageurl": "http://blog.rapidsea.com/wp-content/uploads/2008/03/20080316-bora-bora-national-geographic.jpg", 
    "pageLink": "http://www.google.com" 
} 
]

ページのjavascript

var pointMap = { map: null } 

$(function() { 
    pointMap.init('#map_canvas', new google.maps.LatLng(0, 0), 2); 
    pointMap.placeMarkers('collection.js'); 
}); 

pointMap.init = function (selector, latLng, zoom) { 
    var myOptions = { 
     zoom: zoom, 
     center: latLng, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    } 
    this.map = new google.maps.Map($(selector)[0], myOptions); 
} 

pointMap.placeMarkers = function (filename) { 
    $.getJSON(filename, function (data) { 
     for (var x = 0; x < data.length; x++) { 
      var location = data[x]; 

      var point = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng)); 
      var marker = new google.maps.Marker({ 
       position: point, 
       map: pointMap.map, 
       title: location.title 
      }); 

      var popupContent = '<div id="locationContent">' + 
             '<div>' + location.category + '</div>' + 
             '<div>' + location.title + '</div>' + 
             '<div>' + location.description + '</div>' + 
             '<div><a href="' + location.pageLink + '">See This Story >></a></div>' + 
             '<div><img width="250" src="' + location.imageurl + '" /></div>' + 
           '</div>'; 

      var infoWindow = new google.maps.InfoWindow(); 
        google.maps.event.addListener(marker, 'click', function() { 
         infoWindow.setContent(popupContent); 
         infoWindow.open(pointMap.map, this); 
        }); 
       } 

     }); 
}

HTML

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    // javascript from above 
</script> 
</head> 
<body> 
    <div id="map_canvas"></div> 

</body> 
</html>

正しい場所と開いているすべてのウィンドウ内のマーカーのすべての負荷〜で彼は場所を修正しますが、InfoWindow（popupContent）にロードされたコンテンツはすべてのマーカーの最後のレコードです。任意のヘルプ

出典

2010-11-24 Dacrocky

ため

感謝ので、私が代わりに別の関数に代わりのループ内の情報ウィンドウの作成をプッシュしたし、動作しているようです。

更新されたコード

pointMap.placeMarkers = function (filename) { 
     $.getJSON(filename, function (data) { 
      for (var x = 0; x < data.length; x++) { 
       var location = data[x]; 

       var point = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng)); 
       var marker = new google.maps.Marker({ 
        position: point, 
        map: pointMap.map, 
        title: location.title 
       }); 

       var popupContent = '<div id="locationContent">' + 
             '<div>' + location.category + '</div>' + 
             '<div>' + location.title + '</div>' + 
             '<div>' + location.description + '</div>' + 
             '<div><a href="' + location.pageLink + '">See This Story >></a></div>' + 
             '<div><img width="250" src="' + location.imageurl + '" /></div>' + 
            '</div>'; 

       createInfoWindow(marker, popupContent); 
      } 

     }); 
    } 

    var infoWindow = new google.maps.InfoWindow(); 
    function createInfoWindow(marker, popupContent) { 
     google.maps.event.addListener(marker, 'click', function() { 
      infoWindow.setContent(popupContent); 
      infoWindow.open(pointMap.map, this); 
     }); 
    }

出典

2010-11-24 17:18:43 Dacrocky

あなたは最高です！ –

Dynamic google map InfoWindowループ内の最後のレコードのコンテンツをロードしています

答えて

関連する問題