Display an InfoWindow for 5 markers on Google Maps, the Infowindow is a chart

Question

I have 5 markers on 5 different cities (Aberdeen, Edinburgh, Glasgow, Inverness, Dundee) I need to display this information in a chart on mouseclick.

On Mouseclick:
Edinburgh: Science Fiction - 55, Comedy - 33,Thriller- 21 ,Action - 63, Romance - 17

Glasgow: Science Fiction- 25, Comedy- 42, Thriller-16, Action-29, Romance-21

Aberdeen: Science Fiction-31,Comedy-19, Thriller-41, Action-38, Romance-45

Dundee: Science Fiction- 22, Comedy-4,Thriller-22,Action-33,Romance-26

Inverness:Science Fiction-41,Comedy-27,Thriller-13,Action-15,Romance-19

I currently have code for an infoWindow for Edinburgh but nothing happens when I click the marker.

Link to JSFIDDLE

// Initialize and add the map
function initMap() {

  //The location of Inverness
  var inverness = {
    lat: 57.480819,
    lng: -4.224250
  };
  var city1 = {
    position: inverness
  };
  // The map, centered at Inverness
  var map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 4,
      center: inverness
    });
  // The marker positioned at Inverness
  var marker1 = new google.maps.Marker({
    position: inverness,
    map: map,
    id: 'c1',
    title: 'Number Of Cinemas: 2'
  });

  //The location of Dundee
  var dundee = {
    lat: 56.467546,
    lng: -2.969593
  };
  var city2 = {
    position: dundee
  };
  // The marker, positioned at Dundee
  var marker2 = new google.maps.Marker({
    position: dundee,
    map: map,
    id: 'c2',
    title: 'Number Of Cinemas: 2'
  });

  //The location of Glasgow
  var glasgow = {
    lat: 55.875362,
    lng: -4.250252
  };
  var city3 = {
    position: glasgow
  };
  // The marker, positioned at Glasgow
  var marker3 = new google.maps.Marker({
    position: glasgow,
    map: map,
    id: 'c3',
    title: 'Number Of Cinemas: 11'
  });

  //The location of Edinburgh
  var edinburgh = {
    lat: 55.959425,
    lng: -3.189161
  };
  var city4 = {
    position: edinburgh
  };
  // The marker, positioned at Edinburgh
  var marker4 = new google.maps.Marker({
    position: edinburgh,
    map: map,
    id: 'c4',
    title: 'Number Of Cinemas: 3'
  });

  //The location of Aberdeen
  var aberdeen = {
    lat: 57.155988,
    lng: -2.095139
  };
  var city5 = {
    position: aberdeen
  };
  // The marker, positioned at Aberdeen
  var marker5 = new google.maps.Marker({
    position: aberdeen,
    map: map,
    id: 'c5',
    title: 'Number Of Cinemas: 3'
  });
}

google.charts.load('current', {
  packages: ['corechart']
});

function drawChart(map, marker) {
  //set up data
  var data = google.visualization.arrayToDataTable([
    ['Science Fiction', '55'],
    ['Comedy', '33'],
    ['Thriller', '21'],
    ['Action', '63'],
    ['Romance', '17'],
  ]);
}
//set up any options
var options = {
  title: 'Film Genre Preferences'
};

//Create node
var node = document.createElement('div'),
  infoWindow = new google.maps.InfoWindow(),
  chart = new google.visualization.BarChart(node);

//check which marker it is
if (marker.id == 'c4') {
  chart.draw(data, options);
}
google.maps.event.addListener(marker, 'click', function(mouseclick) {
  drawChart(map, this);

  infoWindow.setContent(node);
  infoWindow.open(map, marker);
});
initialize();

Answer 1

1. you have errors in how you are including the Google Maps Javascript API and the Charts loader (in the fiddle):

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></
</script>

should be:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

Notice that the Google Maps API v3 script include isn't terminated properly with </script> and the Charts loader include has an extra </. JavaScript is sensitive to these types of errors/typos.

I also re-ordered them to do the synchronous load of the charts loader first, then the asynchronous load of the Google Maps Javascript API v3.

2. Once I fix that, I get another JavaScript error: Uncaught TypeError: Cannot read property 'InfoWindow' of undefined

Because that is used outside of the initMap function. You can't use any pieces of the Google Maps Javascript API v3 until it has loaded (when the initMap function runs).

3. Once I fix that, I get another JavaScript error: Uncaught ReferenceError: initialize is not defined (because it isn't defined, the call can be removed).

4. Then Uncaught (in promise) TypeError: Cannot read property 'BarChart' of undefined because the Charts API is being used before it is loaded.

5. Then I get: Data column(s) for axis #0 cannot be of type string, because this is incorrect:

//set up data
var data = google.visualization.arrayToDataTable([
 ['Science Fiction', '55'],
 ['Comedy', '33'],
 ['Thriller', '21'],
 ['Action', '63'],
 ['Romance', '17'], 
  ]);

The second entry should be a number, and there needs to be a first row that is the labels (both strings). This works:

  //set up data
  var data = google.visualization.arrayToDataTable([
    ['Genre', '#'],
    ['Science Fiction', 55],
    ['Comedy', 33],
    ['Thriller', 21],
    ['Action', 63],
    ['Romance', 17],
  ]);

proof of concept fiddle (with one marker)

code snippet:

// Initialize and add the map
function initMap() {

  //The location of Inverness
  var inverness = {
    lat: 57.480819,
    lng: -4.224250
  };
  var city1 = {
    position: inverness
  };
  // The map, centered at Inverness
  var map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 4,
      center: inverness
    });

  //The location of Edinburgh
  var edinburgh = {
    lat: 55.959425,
    lng: -3.189161
  };
  var city4 = {
    position: edinburgh
  };
  // The marker, positioned at Edinburgh
  var marker4 = new google.maps.Marker({
    position: edinburgh,
    map: map,
    id: 'c4',
    title: 'Number Of Cinemas: 3'
  });



  google.charts.load('current', {
    packages: ['corechart']
  });

  function drawChart(map, marker) {
    //set up data
    var data = google.visualization.arrayToDataTable([
      ['Genre', '#'],
      ['Science Fiction', 55],
      ['Comedy', 33],
      ['Thriller', 21],
      ['Action', 63],
      ['Romance', 17],
    ]);

    //set up any options
    var options = {
      title: 'Film Genre Preferences'
    };

    //Create node
    var node = document.createElement('div'),
      infoWindow = new google.maps.InfoWindow(),
      chart = new google.visualization.BarChart(node);
    infoWindow.setContent(node);
    //check which marker it is
    if (marker.id == 'c4') {
      chart.draw(data, options);
    }
    return infoWindow;
  }
  google.maps.event.addListener(marker4, 'click', function(mouseclick) {
    var infoWindow = drawChart(map, this);
    infoWindow.open(map, marker4);
  });
  setTimeout(function() {
    google.maps.event.trigger(marker4, 'click');
  }, 1000);
}

/* Set the size of the div element that contains the map */

#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

<!--The div element for the map -->
<div id="map"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>