user placed markers with infowindows in google maps - google-maps-api-3

Question

I'm working on a school project where I´m using google maps to make a travel planer. the idea is that the user can drop markers on the map and fill them with text. so far I've managed to load google maps and I can drop markers but I can´t get the infowindows to work. When I looked at googles API it said to make a marker, make an infowindow and the use an addlistener to open the infowindow when the marker is clicked, all the different tutorials also say the same thing but I can´t get it to work. so far my code looks like this:
function initialize()
{
var mapOptions =
{
zoom: 2,
center: {lat: 0.0, lng: 0.0}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'rightclick', function(event) {
var marker = new google.maps.Marker({
position: event.latLng, //map Coordinates where user right clicked
map: map,
draggable:true, //set marker draggable
animation: google.maps.Animation.DROP
});
});
//Content structure of info Window for the Markers
var contentString = $('<div class="marker-info-win">'+
'<div class="marker-inner-win"><span class="info-content">'+
'<h1 class="marker-heading">New Marker</h1>'+
'This is a new marker infoWindow'+
'</span>'+
'</div></div>');
//Create an infoWindow
var infowindow = new google.maps.InfoWindow();
//set the content of infoWindow
infowindow.setContent(contentString);
//add click event listener to marker which will open infoWindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker); // click on marker opens info window
});
}
can anyone tell me what i´m doing wrong? the entire code can be seen here: http://pastebin.com/R1bg0gi4

Answer 1

as commented by duncan, you must move the code that set's the click-listener of the marker into the rightclick-handler of the map, after the creation of the marker
the content for an Infowindow may be a string or a element-node, you supply none of them(a jQuery-object)
function initialize()
{
var mapOptions =
{
zoom: 2,
center: {lat: 0.0, lng: 0.0}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions),
//Create an infoWindow
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'rightclick', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable:true, //set marker draggable
animation: google.maps.Animation.DROP
});
//Content structure of info Window for the Markers
var contentString = $('<div class="marker-info-win">'+
'<div class="marker-inner-win"><span class="info-content">'+
'<h1 class="marker-heading">New Marker</h1>'+
'This is a new marker infoWindow'+
'</span>'+
'</div></div>')[0];
//set the content of infoWindow
infowindow.setContent(contentString);
//add click event listener to marker which will open infoWindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);