2015-11-18 33 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