Opening Up a Table on Click Google Maps Javascript

Question

So I'm working with the Google Maps Javascript Api and currently have a map that is populated with circles. I want to be able to click on a circle and have it open a table with some information, but am unsure about how to do this. I have been able to click on the circle and have it pop open an info box using this:

var contentString = city[0].toString() + ": " + city[1].toString() + " shooting(s)";
var infoWindow= new google.maps.InfoWindow({
    content: contentString
    });

google.maps.event.addListener(cityCircle, 'click', function(ev){
    infoWindow.setPosition(cityCircle.getCenter());
    infoWindow.open(map);
});
 // });

}

What I'm not sure about is how to format this info box into a table. I've tried something like this:

var contentString = "<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>";

But that gave me the error: "Unexpected number". If anyone could provide some help it would be much appreciated!

Answer 1

You have to pay attention to your quotes ("), you have to use different ones inside the HTML string than you use to delimit the string itself.

related question: Replace double quote in javascript variable string

Instead of:

var contentString = "<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>";

One option is to use a mixture of single and double quotes, and don't split the string across multiple lines:

var contentString = "<table width='100%' border='1'><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td rowspan='2'>&nbsp;</td></tr><tr><td>&nbsp;</td></tr></table>";

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var contentString = "<table width='100%' border='1'><tr><td>&nbsp;A</td><td>&nbsp;B</td></tr><tr><td>&nbsp;E</td><td rowspan='2'>&nbsp;C</td></tr><tr><td>&nbsp;D</td></tr></table>";
  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    position: map.getCenter()
  });
  infowindow.open(map);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>