InfoWindow for 5 markers on Google Maps

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.


// 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
 `enter code here`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 ( == 'c4') {
chart.draw(data, options);
google.maps.event.addListener(marker, 'click', function (mouseclick) 
drawChart(map, this);


When I view your jsfiddle, I get an error showing in the browser console. Fix that first and then if you are still having trouble, let us know. You have not defined what google is.

How do I define what google is?