Google Maps infobox does not load data from a JSON file

Question

I put Google Maps and I'm opening information from a JSON file, the bookmarks, markerclusterer, and markerwithlabel are working properly. But the infobox is opening a single item and repeating it on all markers. What is wrong with this code that the infobox is not opening information for each marker?

What is wrong with this code? Can someone help me find this error and make the infobox open all results?

function initialize() {
    var mapOptions = { center: new google.maps.LatLng(-23.5568492,-46.6371455), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var myMap = new google.maps.Map(document.getElementById("maps"), mapOptions); 

    var locationdata = { "locations": [{ "nome":"ponto 1", "latitude": "-23.549014", "longitude": "-46.659386"},{ "nome":"ponto 2", "latitude": "-23.558333", "longitude": "-46.632135"},{ "nome":"ponto 3", "latitude": "-23.563639", "longitude": "-46.679642"},{ "nome":"ponto 4", "latitude": "-23.583576", "longitude": "-46.635740"}]}

    var locations = [];
    var markers = [];
        for (var i = 0; i < locationdata.locations.length; i++) {
            var location=locationdata.locations;           
            var latLng = new google.maps.LatLng(location[i].latitude, location[i].longitude);
            var marker = new google.maps.Marker({'position': latLng});
            markers.push(marker);

        var i_box = '<div style="background-color:#fff;font-size:13px;color:#454545;padding:5px;border:1px solid #dedede;border-radius:4px;">'+location[i].nome+'<br>Latitude :'+location[i].latitude+'<br>Longitude :'+location[i].longitude+'</div>';

        var myOptions = {
             content: i_box,
             disableAutoPan: false,
             maxWidth: 0,
             pixelOffset: new google.maps.Size(-100, -100),
             zIndex: null,
             boxStyle: { 
                background: "url('tipbox.gif') no-repeat",
                opacity: 1,
                width: "200px"
                },
            closeBoxMargin: "0px 0px 0px 0px",
            closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif",
            infoBoxClearance: new google.maps.Size(1, 1),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };

        google.maps.event.addListener(marker, "click", function (e) {
            ib.open(myMap, this);
        });
            var ib = new InfoBox(myOptions);

    }
            var markerCluster = new MarkerClusterer(myMap, markers, {imagePath: 'img/m'});
}
initialize();

#maps{position: relative;display: block;margin: 0 auto 30px auto;padding: 0;width: 100%;height: 400px;background-color:transparent;border-bottom: 1px solid #dedede;} 
#maps img { max-width:inherit; }
img[src*="gstatic.com/"], img[src*="googleapis.com/"] { max-width:none; }

<div id="maps"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp&key=AIzaSyAZjvuyGoWEtyS4wfeLpERwKNgSYmhea98&sensor=false&callback=initMap"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://oscaraguiar.com/estudo/infobox.js"></script>
<script src="http://oscaraguiar.com/estudo/markerclusterer.js"></script>