I'm trying to pass variables to a button onClick function from inside an InfoWindow?

Question

I have looked at examples of this but haven't found a solution to pass circle variable to my button onclick function embedded in a Google Maps InfoWindow

This line works:

var theCircleButton = "<input type='button' onClick='console.log(" + lat + "," + lon + ")' class='btn' value='Show Circle'></input>";

While this line doesn't:

var theCircleButton = "<input type='button' onClick='console.log(" + lat + "," + lon + "," + circle + ")' class='btn' value='Show Circle'></input>";

So when I try to make the circle visible with the following line it doesn't work

var theCircleButton = "<input type='button' onClick='circleVisible(" + circle + ")' class='btn' value='Show Circle'></input>";

This is the functional code

function circleVisible(circle) {
  circle.setVisible(true);
}

function circleInvisible(circle) {
  circle.setVisible(false);
}

function fillMap(map, lat, lon) {

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    map: map,
    label: "My Marker"
  });

  var circle = new google.maps.Circle({
    strokeWeight: 1,
    fillOpacity: 0.0,
    map: map,
    visible: false,
    center: new google.maps.LatLng(lat, lon),
    radius: 10000
  });

  var infoWindow = new google.maps.InfoWindow({
      position: marker.getPosition()
  });

  //var theCircleButton = "<input type='button' onClick='console.log(" + lat + "," + lon + ")' class='btn' value='Show Circle'></input>";
  //var theCircleButton = "<input type='button' onClick='console.log(" + lat + "," + lon + "," + circle + ")' class='btn' value='Show Circle'></input>";
  var theCircleButton = "<input type='button' onClick='circleVisible(" + circle + ")' class='btn' value='Show Circle'></input>";


  infoWindow.setContent("<div style='text-align:center;'>" + theCircleButton + "</div>");

  google.maps.event.addListener(marker, "click", function() {
    infoWindow.open(map, marker);
  });

}


function initMap() {
  // Latitude and Longitude for the centre of Australia
  var centreAusLat = -28.080606;
  var centreAusLon = 133.104225;
  var zoomLevelAus = 4;

  // the options used to create the Google Maps object
  var mapOptions = {
    // roughly the centre of Australia
    center: new google.maps.LatLng(centreAusLat, centreAusLon),

    // zoom level set to see all of Australia
    zoom: zoomLevelAus,

    // show a satellite image based map
    mapTypeId: google.maps.MapTypeId.SATELLITE,
  };

  // create the Google Maps object
  var map = new google.maps.Map(
      document.getElementById('map-canvas'), mapOptions
  );

  fillMap(map, centreAusLat, centreAusLon);
}

Answer 1

The circle variable needs to be defined in the global context to be accessible in HTML click listener functions.

// in global context.
var circle;
function fillMap(map, lat, lon) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    map: map,
    label: "My Marker"
  });

  circle = new google.maps.Circle({
    strokeWeight: 1,
    fillOpacity: 0.0,
    map: map,
    visible: false,
    center: new google.maps.LatLng(lat, lon),
    radius: 10000
  });

proof of concept fiddle

var circle;

function fillMap(map, lat, lon) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    map: map,
    label: "My Marker"
  });

  circle = new google.maps.Circle({
    strokeWeight: 1,
    fillOpacity: 0.0,
    map: map,
    visible: false,
    center: new google.maps.LatLng(lat, lon),
    radius: 10000
  });
  map.fitBounds(circle.getBounds());
  var infoWindow = new google.maps.InfoWindow({
    position: marker.getPosition()
  });

  var theCircleButton = "<input type='button' onClick='circleVisible(circle)' class='btn' value='Show Circle'></input>";

  infoWindow.setContent("<div style='text-align:center;'>" + theCircleButton + "</div>");

  google.maps.event.addListener(marker, "click", function() {
    infoWindow.open(map, marker);
  });
}

function circleVisible(circle) {
  circle.setVisible(true);
}

function circleInvisible(circle) {
  circle.setVisible(false);
}

function initMap() {
  // Latitude and Longitude for the centre of Australia
  var centreAusLat = -28.080606;
  var centreAusLon = 133.104225;
  var zoomLevelAus = 4;

  // the options used to create the Google Maps object
  var mapOptions = {
    // roughly the centre of Australia
    center: new google.maps.LatLng(centreAusLat, centreAusLon),

    // zoom level set to see all of Australia
    zoom: zoomLevelAus,

    // show a satellite image based map
    mapTypeId: google.maps.MapTypeId.SATELLITE,
  };

  // create the Google Maps object
  var map = new google.maps.Map(
    document.getElementById('map-canvas'), mapOptions
  );

  fillMap(map, centreAusLat, centreAusLon);
}

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

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