Search code examples
javascriptgoogle-mapsinfowindow

Display html content and chart in infowindow

I'm working on google maps api and google charts, I want have markers on my map, that displays different info and graph for different markers. I want to display some html content and graph below that content.

But when I set html content and graph node in infoWindow.setContent(contentString + node); it displays html content and [object HTMLDivElement] below it instead of graph but if I set only graph node in infoWindow.setContent(node); then it displays graph in infowindow, but I want both html content and graph in infowindow. what can I do?

Here is my jsfiddle

code snippet:

var contentString = '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<p><center><h1 id="firstHeading" class="firstHeading">Amol shah</h1></center></p>' +
  '<p><center><h3>12324 - TM</h3></center></p>' +
  '<div id="bodyContent">' +
  '<p><center><b>Reporting : </b></center>' +
  '<center><b>ABM</b>: Jignesh Mehta </center>' +
  '<center><b>RBM</b>: Sunil boricha </center>' +
  '<center><b>ZM</b>: sachin pawar </center> </p>' +
  '<p><center><b>KPI : </b></center>' +
  '</div>' +
  '</div>';

function drawChart(marker) {

  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

  // Set chart options
  var options = {
    'title': 'Pizza sold @ ' +
      marker.getPosition().toString(),
    'width': 300,
    'height': 150
  };

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

  chart.draw(data, options);
  infoWindow.setContent(contentString + node);
  infoWindow.open(marker.getMap(), marker);
}


function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(-33.891044, 151.275537),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

  var marker1 = new google.maps.Marker({
    position: mapOptions.center,
    map: map
  });

  google.maps.event.addListener(marker1, 'click', function() {
    drawChart(this);
  });

}
google.load('visualization', '1.0', {
  'packages': ['corechart']
});
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
<div id="map_canvas"></div>
<script src="https://www.google.com/jsapi"></script>
<script asynch defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"></script>

How can I display content + graph inside infowindow?

Solution

  • InfoWindow content can be either a string or a HTML Node.

    From the documentation:

    content

    Type: string|Node
    Content to display in the InfoWindow. This can be an HTML element, a plain-text string, or a string containing HTML. The InfoWindow will be sized according to the content. To set an explicit size for the content, set content to be a HTML element with that size.

    To solve your issue, create a HTML node to add to the InfoWindow content that contains both the string content and the chart, and add it as a node:

    var infoWindowNode = document.createElement('div'); // main containing node for InfoWindow  
var node        = document.createElement('div');    // for chart
var textNode = document.createElement('div');       // for "string content"
textNode.innerHTML = contentString;
infoWindowNode.appendChild(textNode);               // append "string content"
infoWindowNode.appendChild(node);                   // append chart
var infoWindow  = new google.maps.InfoWindow();
var chart       = new google.visualization.PieChart(node);

chart.draw(data, options);
infoWindow.setContent(infoWindowNode); // add node to InfoWIndow

    proof of concept fiddle

    screenshot of resulting map

    code snippet:

    var contentString = '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<p><center><h1 id="firstHeading" class="firstHeading">Amol shah</h1></center></p>' +
  '<p><center><h3>12324 - TM</h3></center></p>' +
  '<div id="bodyContent">' +
  '<p><center><b>Reporting : </b></center>' +
  '<center><b>ABM</b>: Jignesh Mehta </center>' +
  '<center><b>RBM</b>: Sunil boricha </center>' +
  '<center><b>ZM</b>: sachin pawar </center> </p>' +
  '<p><center><b>KPI : </b></center>' +
  '</div>' +
  '</div>';

function drawChart(marker) {

  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

  // Set chart options
  var options = {
    'title': 'Pizza sold @ ' +
      marker.getPosition().toString(),
    'width': 300,
    'height': 150
  };
  var infoWindowNode = document.createElement('div');
  var node = document.createElement('div');
  var textNode = document.createElement('div');
  textNode.innerHTML = contentString;
  infoWindowNode.appendChild(textNode);
  infoWindowNode.appendChild(node);
  var infoWindow = new google.maps.InfoWindow();
  var chart = new google.visualization.PieChart(node);

  chart.draw(data, options);
  infoWindow.setContent(infoWindowNode /*contentString + node */ );
  infoWindow.open(marker.getMap(), marker);
}


function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(-33.891044, 151.275537),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

  var marker1 = new google.maps.Marker({
    position: mapOptions.center,
    map: map
  });

  google.maps.event.addListener(marker1, 'click', function() {
    drawChart(this);
  });
  google.maps.event.trigger(marker1, 'click');

}
google.load('visualization', '1.0', {
  'packages': ['corechart']
});
    html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
    <div id="map_canvas"></div>
<script src="https://www.google.com/jsapi"></script>
<script asynch defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"></script>