javascript - Multiple markers with info windows map error

Question

I have this working map https://jsfiddle.net/m9ugbc7h/4/ then i tryed to integrate multiple markers with info windows following step by step this tutorial http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/ so now i got this new version of the map https://jsfiddle.net/m9ugbc7h/5/ but it doesn't work

Here the description how i think the added code works

This is the text for two info windows in order

var infoWindowContent = [
    ['<div class="info_content">' +
    '<h3>Ventura</h3>' +
    '<p>Ventura P</p>' +
     '</div>'],
    ['<div class="info_content">' +
    '<h3>Selvatica</h3>' +
    '<p>Selvatica p</p>' +
    '</div>']
];

This adds a number to every marker listed before

// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0]
    });

And this one asigns text 1 to marker 1, text 2 to marker 2, etc.

 // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

Answer 1

You have few issues with the code:

First

Console error google is not defined caused by:

 var bounds = new google.maps.LatLngBounds();

at the top of the file before google js is loaded. Move it inside jQuery(document).ready(function($){:

jQuery(document).ready(function($){
    bounds = new google.maps.LatLngBounds();

Second

// Loop through our array of markers & place each one on the map 

Why? They are already placed on the map, you just want to attach them InfoWindow:

 //marker = new google.maps.Marker({
 //    position: position,
 //    map: map,
 //     title: markers[i][0]
 //});
 var marker = markers[i];

In the above code is the root of your problem (info windows not showing up): you are creating new Marker object instead of using the existing one from the markers array.

Third

Console error: too much recursion

caused by:

 // Automatically center the map fitting all markers on the screen
 map.fitBounds(bounds);

The issue with this one is most probably that bounds are undefined at this moment. Not sure why, but too much recursion is usualy caused by that. I have commented that out, so you will have to take a look how to pass valid value in fitBounds.

Fourth

You have sintax error here:

var infoWindow = new google.maps.InfoWindow(), marker, i;

You probably meant:

var infoWindow = new google.maps.InfoWindow();

Working fiddle: https://jsfiddle.net/m9ugbc7h/7/