google maps - function geocode and marker

Question

I need pass variable markers[x] and infoWindowContent[x] in place of the string "Title Markers" and "Text Window".

Using markers [x] or infoWindowContent[x] value is undefined.

How can I do this?

Thanks in advance!

function initialize(addresses, zoom_s) {

    // Multiple Markers
    var markers = [
        ['London Eye, London'],
        ['Palace of Westminster, London']
    ];

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content"><h3>London Eye</h3><p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p></div>'],
        ['<div class="info_content"><h3>Palace of Westminster</h3><p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p></div>']
    ];

    var bounds = new google.maps.LatLngBounds();
    var myOptions = {
        mapTypeId: 'roadmap'
    };

    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    if (geocoder) {
        // Display multiple markers on a map
        var infoWindow = new google.maps.InfoWindow(),
            marker, i;
        var marker_testo = "";
        var info_testo = "";

        for (var x = 0; x < addresses.length; x++) {

            var marker_testo = addresses[x];

            geocoder.geocode({
                'address': addresses[x]
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                        marker = new google.maps.Marker({
                            position: results[0].geometry.location,
                            map: map,
                            title: "Title Markers"

                        });

                        // Allow each marker to have an info window    
                        google.maps.event.addListener(marker, 'click', (function (marker, x) {
                            return function () {
                                infoWindow.setContent("Text Window");
                                infoWindow.open(map, marker);
                            }
                        })(marker, x));

                        // Automatically center the map fitting all markers on the screen
                        bounds.extend(results[0].geometry.location);

                        map.fitBounds(bounds);
                    }
                }
            });
        }

        // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
            this.setZoom(14);
            google.maps.event.removeListener(boundsListener);
        });
    }
}

Answer 1

var markers = [
    'London Eye, London',
    'Palace of Westminster, London'
];

console.log(markers[0]);

There is no need for the barckets inside of your array. Please check https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

How your array is constructed, you would need to use markers[0][0] or markers[1][0] etc.

Edit:

To complete my answer, here is a way to achieve what you want. Create a counter and increment it within the geocoder result and create a new variable to hold the contents of the infoWindow.

var iwContent = infoWindowContent[counter];

var marker = new google.maps.Marker({
    position: results[0].geometry.location,
    map: map,
    title: addresses[counter]
});

google.maps.event.addListener(marker, 'click', function () {

    infoWindow.setContent(iwContent);
    infoWindow.open(map, marker);
});

counter++;

See my working example.