标记未显示Google Maps API

时间:2014-04-02 20:25:37

标签: javascript jquery ruby-on-rails google-maps google-maps-api-3

我是初学程序员,我正在使用Google Maps API创建一个简单的应用程序来练习Javascript。地图正确居中,但标记不会显示。在进行一些重构之前,使用每个循环生成标记。这是我的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);
});

1 个答案:

答案 0 :(得分:1)

您应该将listing.LatLng替换为listing.latlng:这是您在Concert中设置它的方式。