In pset8, I currently have a working map with visible markers with label. However, when I click on one of the markers, no infoWindow shows up, blank or otherwise.
When the mashup page loads, I get this error in the console: Uncaught TypeError: Cannot read property '__e3_' of undefined
. When I click the arrow to trace the error, it points me to this line in scripts.js
:
google.maps.event.addListener(singleMarker, "click", function () {
singleMarker
is the variable I use to represent each individual marker (as opposed to the array markers
).
My guess is that it doesn't seem to be binding the event listener to the map.
map
has already been defined above this.
This is my entire addMarker
function:
function addMarker(place)
{
myLatLng = new google.maps.LatLng(parseFloat(place.latitude), parseFloat(place.longitude));
singleMarker = new MarkerWithLabel({
position: myLatLng,
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: place.place_name + ", " + place.admin_code1, // place name from database
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
}
// info window
var info = new google.maps.InfoWindow();
markers.push(singleMarker);
google.maps.event.addListener(singleMarker, "click", function () {
showInfo(singleMarker);
$.getJSON("articles.php", "geo=" + place.postal_code)
.done(function(data, textStatus, jqXHR)
{
// attempt to print JSON
})
The code is currently mixed in with the attempt to print the JSON articles, but I need the window to show up in the first place. What am I doing wrong?