Google Map Marker InfoWindow Not Showing for location other than starting map location

Question

I'm trying to make an infowindow pop up when I click on the marker. However, the infowindow only shows up if the marker is on the position that is equal to the position that the google map was created on. Any other marker positions and the infowindow won't pop up. It seems to be a very strange problem. No errors on the console.

For example in the code, if I set the position of the marker to be the passed lat and long, which is used to make the google map. It is fine. But if I alter the position (position_val) a little bit, as i do with lat +1, the infowindow does not show up. But when I click on the infowindow it does center the map to where the infowindow should show up. The listener does work, as I've tried outputting console.log() when a marker is clicked. Why can't I make the marker have a different position? I combined the map creation and marker creation for simplicity.

Edit: jsfiddle link: http://jsfiddle.net/G3b8M/2/

var map;
var infowindow = new google.maps.InfoWindow({});

function makeMap(lat, long) {


    var myOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        position: new google.maps.LatLng(lat, long),
        zoom: 14,

    };

    map = new google.maps.Map( document.getElementById("map_canvas"), myOptions);
    map.setCenter( myOptions.position);

    //position_val = new google.maps.LatLng(lat, long); infowindow works
    position_val = new google.maps.LatLng(lat + 1, long); //infowindow doesn't work

    var marker = new google.maps.Marker({
        position: position_val ,
        map: map,
    });

    map.setCenter(position_val);

    var contentString = 'hello how are you';


    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    }); 

}

Any help would be appreciated. Thanks.

Answer 1

I can't tell you exactly why it happens, usually it shouldn't , but the pure presence of a position-property for the map(no matter what the value is) seems to be the issue.

Demo's:

1. with position: http://jsfiddle.net/doktormolle/wqgLR/
2. without position: http://jsfiddle.net/doktormolle/wqgLR/1/

Note: I've modified your code a little bit to reduce other possible reasons. e.g. you shouldn't use long as identifier , because it's a reserved word.

However, it makes no sense to me that it works with the other line in the original code, curious.

You may report a bug for this.