Javascript 标记不显示在Google Maps API中

我是一名初学者程序员，我正在通过使用谷歌地图API创建一个简单的应用程序来练习Javascript。地图正确居中，但标记不显示。在我进行重构之前，使用each循环可以很好地生成标记。以下是我的javascript代码：

$(function () {
  function initialize() {

    // Get city coordinates .. set map options so map centers on city .. place map on map-canvas  
    var page_city_lat = $("#page_city_lat").text();
    var page_city_lng = $("#page_city_lng").text();
    var mapOptions = {
      center: new google.maps.LatLng(page_city_lat, page_city_lng),
      zoom: 10
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    // define concert object, mapCoords
    function Concert(x)
    {
      this.lat = $(x).find(".lat").text();
      this.lng = $(x).find(".lng").text();    
      this.headline = $(x).find(".event_title").text();
      this.venue = $(x).find(".venue").text();
      this.latlng = new google.maps.LatLng(this.lat, this.lng)
    };


    // Global infowindow variable declaration makes only 1 infowindow open at a time. 
    var infowindow = new google.maps.InfoWindow();
    // Necessary to pre-declare variable?
    var map_ids = $(".map_id");
    $.each(map_ids, function (index, value) 
    {
      var listing = new Concert(value);
      var concertString = 'headline: ' + listing.headline + '<br>' + 'Venue' + listing.venue
      var concertMarker = new google.maps.Marker(
      {
        position: listing.LatLng,
        map: map,
        title: listing.venue
      });
      google.maps.event.addListener(concertMarker, 'click', function () 
          {
            infowindow.setContent(concertString);
            infowindow.open(map, concertMarker);
          }
      );
    });
  };
    google.maps.event.addDomListener(window, 'load', initialize);
});

$（函数（）{
函数初始化（）{
//获取城市坐标..设置地图选项，使地图以城市为中心..将地图放置在地图画布上
var page_city_lat=$（“#page_city_lat”）.text（）；
var page_city_lng=$（“#page_city_lng”）.text（）；
变量映射选项={
中心：新的google.maps.LatLng（page_city_lat，page_city_lng），
缩放：10
};
var map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
//定义协调对象，mapCoords
功能音乐会（x）
{
this.lat=$（x）.find（“.lat”）.text（）；
this.lng=$（x）.find（“.lng”）.text（）；
this.headline=$（x）.find（“.event_title”）.text（）；
this.venture=$（x）.find（“.venture”）.text（）；
this.latlng=新的google.maps.latlng（this.lat，this.lng）
};
//全局infowindow变量声明一次只打开一个infowindow。
var infowindow=new google.maps.infowindow（）；
//需要预先声明变量吗？
var map_id=$（“.map_id”）；
$.each（映射ID、函数（索引、值）
{
var清单=新音乐会（价值）；
var concertString='headline:'+listing.headline+'
'+'Venue'+listing.Venue
var concertMarker=new google.maps.Marker(
{
职位：listing.LatLng，
地图：地图，
标题：列名地点
});
google.maps.event.addListener（concertMarker，'click'，函数（）
{
infowindow.setContent（concertString）；
信息窗口。打开（地图、标记）；
}
);
});
};
google.maps.event.addDomListener（窗口“加载”，初始化）；
});

您应该用

列表替换
列表。LatLng
：这是您协调设置的方式。
似乎有输入错误：
位置：列表。LatLng，
，应该是
LatLng
。顺便说一句，gmaps4rails可以帮助您稍微抽象代码