Google Maps infowindow form content appearing below map

Question

I would like the HTML form content to only show inside the infowindow which appears when a user clicks on a marker, but at the moment it is displaying below the map. When I click on a marker, it moves from below the map into the infowindow. I have tried to hide it with things like this:

JS

    function formShow(){ 
          $('#map').click(function() {
        $('#form').addClass('.formShow');
      });
  };

CSS

#form{
    display: none;
}
.formShow{
    display: block;
}

I can't seem to get it to work. I'm under the impression if I just placed the HTML form inside infowindow content rather than referencing 'form' that would work, but it doesn't feel like putting an HTML form within js would ever be the correct way to do things?

My full code (relevant to this question) is below:

var map;
      var marker;
      var infowindow;
      var messagewindow;
      var lat;
      var lng;

      function initMap() {
        var uk = {lat: 55.759107, lng: -3.443596};
        map = new google.maps.Map(document.getElementById('map'), {
          center: uk,
          zoom: 13
        });

        infowindow = new google.maps.InfoWindow({
          content: document.getElementById('form')     
        })

        messagewindow = new google.maps.InfoWindow({
          content: document.getElementById('message')
        });

        google.maps.event.addListener(map, 'click', function(event) {
          marker = new google.maps.Marker({
            position: event.latLng,
            map: map,
          });

          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
            lat = this.position.lat();
            lng = this.position.lng();
            //alert(this.position);
            document.forms["mapSubForm"]["lat"].value = lat;
            document.forms["mapSubForm"]["lng"].value = lng;
           
          });                
      
        });
    };
    
                 function formShow(){ 
      $('#map').click(function() {
    $('#form').addClass('.formShow');
      });
  }; 

#form{
    display: none;
}
.formShow{
    display: block;
}

<div id="map" height="100%" onclick = "formShow()"></div>
   <div id="form">
        <form action="add-map.php" method="POST" enctype="multipart/form-data" id="mapSubForm">
        <h2>Add New Submission</h2>
        <label for="name">Enter a name:</label>
        <input type="text" name="name" id="name">
        <label for="address">Enter address:</label>
        <input type="text" name="address" id="address">
        <input type="hidden" name="lat" id="lat">
        <input type="hidden" name="lng" id="lng">
        <input type="submit" name="submitMapBtn" value="Add Submission">
    </form>
    </div>

Visual examples:

• Before Click
• After Click

Answer 1

I solved this by adding to css:

#form{
    display: none;
}

And in the JS file adding to the google.maps.event.addListener(marker, 'click', function() on the line below infowindow.open(map, marker);:

document.getElementById('form').style.display = "block";