How to get user input on click of button in node.js using google maps api?

Question

I have a map that places a marker on the user's current location using the Google Maps Geolocation api. But I also want the user to be able to search for a name and for the app to return another marker (in addition to the marker at the current location) at the first result of closest locations that fit the user input. (The google maps api returns an array of closest locations).

Here is the HTML for the search bar and the submit button:

<form>
<p> Enter item here:
<input name = 'location1' id = "location2"/>
</p>
<button type = 'submit' id = "submitButton" ><center> Submit</center>
</button>
</form>

And here are parts of the javascript (in ejs) that contain the function for the map and the function (getStoreLocation) that is supposed to get the user input once the submit button has been clicked:

if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
              };
              var marker = new google.maps.Marker({
                position: pos,
                map: map
              });
              map.setCenter(pos);
              document.getElementById('submitButton').onclick = function() {getStoreLocation()}
}, function() {
              handleLocationError(true, infoWindow, map.getCenter());
            });

          } else {
            // Browser doesn’t support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
          }


        }
function getStoreLocation(){
              var input = document.getElementById('location2').value
              console.log(input)
              var apiKey = 'AIzaSyDUWTdknyhqy6iOYA4y8zbR6FJN_tamIaA'
              var url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${pos.lat},${pos.lng}&radius=500&keyword=${input}&key=${apiKey}`              

              fetch(url)
              .then(function(data){
                return data.json()
              })
              .then(function(json){
                console.log(json)
                var latitudeOfInput = json.results[0].geometry.location.lat
                var longitudeOfInput = json.results[0].geometry.location.lng
                var pos2 = {
                  lat: latitudeOfInput,
                  lng: longitudeOfInput
                };

                console.log(pos2)

                var marker2 = new google.maps.Marker({
                  position: pos2,
                  map: map
                });
              })
  }

But even after I input a name and press the Submit Button, the page returns the map with only one marker at the current location, and does not return a second marker. Does anyone know how to fix this or what I'm doing wrong?

Answer 1

The button is causing the page to refresh change the type of the button to be.

<button type="button">

If that doesnt work then change the button element to.

<input type="button">