2015-11-18 31 views
-1

我想打开一些标记上的一些信息窗口。我正在关注another an example here.我没有在控制台中引发任何错误。我期望的信息窗口打开,但没有看到任何东西。我试图确保所有的变量都是全局变量,在我称之为事件监听器的地方移动,并在for loop的结构中调用标记和信息窗口。我已经尝试在听音事件中切换出markers和,但都没有奏效。信息窗口中的for循环不起作用

我在做什么错?

Fiddle here.

HTML:

<head> 
<script src="http://maps.googleapis.com/maps/api/js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
</head> 
<body> 
    <h1 style="text-align: center;">Parking Garage Availability</h1> 

    <div id="map"></div> 

    <ul id="list"></ul> 
    <p id="GAR57"></p> 
    <p id="GAR31"></p> 
    <p id="GAR60"></p> 
    <p id="GAR61"></p> 
</body> 

CSS:

#map { 
    height: 300px; 
    width: 500px; 
    margin: 0 auto; 
    border: 1px solid black; 
} 

的JavaScript:

var map; 
var mapProp; 
var marker; 
var markers; 
var url; 
var myData; 
var time; 
var available; 
var total; 
var facility; 
var position; 
var infoWindow; 

function initialize() { 
    mapProp = { 
    center:new google.maps.LatLng(38.994890, -77.063416), 
    zoom:13, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map"),mapProp); 
} 

$(document).ready(function() { 
    initialize(); 
    url = 'https://data.montgomerycountymd.gov/resource/qahs-fevu.json'; 

    $.getJSON(url, function(data) { 
     myData = data; 
     console.log(myData); 
     for (i = 0; i < myData.length; i++) { 
      time = (myData[i].asofdatetime).slice(11); 
      available = myData[i].space_count; 
      total = myData[i].total_spaces; 
      facility = myData[i].facilitynumber; 
      if (facility === "GAR 57") { 
       facility = "4841 Bethesda Avenue (Elm Street)"; 
       $('#GAR57').html('As of ' + time + ' there are ' + available + 
        ' of ' + total + ' at ' + facility); 
      } else if (facility === "GAR 31") { 
       facility = "7171 Woodmont Avenue"; 
       $('#GAR31').html('As of ' + time + ' there are ' + available + 
        ' of ' + total + ' at ' + facility); 
      } else if (facility === "GAR 60") { 
       facility = "921 Wayne Avenue"; 
       $('#GAR60').html('As of ' + time + ' there are ' + available + 
        ' of ' + total + ' at ' + facility); 
      } else { 
       facility = "801 Ellsworth Drive"; 
       $('#GAR61').html('As of ' + time + ' there are ' + available + 
        ' of ' + total + ' at ' + facility); 
      } 
     } 
    }); 

    //set markers 
    markers = [ 
    ["4841 Bethesda Avenue (Elm Street)", 38.980724, -77.0964], 
    ["7171 Woodmont Avenue", 38.980097, -77.093662], 
    ["921 Wayne Avenue", 38.995740, -77.025652], 
    ["801 Ellsworth Drive",38.997778, -77.025071] 
    ]; 

    infoWindow = new google.maps.InfoWindow(); 

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

     google.maps.event.addListener(markers, 'click', function() { 
      infoWindow.setcontent("<div>Hello, World</div>"); 
      infoWindow.open(map, this); 
     }); 
    }; 


}); 
+0

更改 'google.maps.event.addListener(标记,' 到“谷歌。 maps.event.addListener(marker,'然后你会看到你的infowindow没有函数'setcontent' – xxxmatko

回答

2

改变最后的代码来此

google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent("<div>Hello, World</div>"); 
     infoWindow.open(map, this); 
    }); 

标记代替标记,和setContent代替setcontent

updated fiddle