Multiple infoWindows stacking over same location Google Maps API version 3

I'm loading a json file for a bunch of markers on my google map (verison 3 api) and then placing infoWindows for each marker.

It all works swimmingly well except that the markers are ignoring the latlng information, and when markers are clicked the windows simply stack over the original marker.

Everything works perfectly except for the positioning and the infoWindows display the correct latlng information so it 'seems' to be correctly received during each iteration of the json file.

Here is what I've tried so far:

$.getJSON(url, function(json) {
    $.each(json.properties, function(i, property) {
        var latLng = new google.maps.LatLng(property.lat, property.lng);
        marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: markerImage
        });
        var infowindo开发者_如何学Pythonw = new google.maps.InfoWindow({
            content: '<div id="balloon"><img src="../images/20010007_1.jpg" class="balloonpic"><strong>' + property.title + '</strong><br />' + latLng + '</div>'
        });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
    });
});