Q:

How to place marker on google maps, given input (latitude, longitude)

I want to insert the latitude and longitude and I want to place a marker on the map with the latitude and longitude specified when clicking the biutton. I also want the marker placed to have the characteristics that the code shows, meaning, 3 buttons and some information that was given when the marker was placed ("data" and "fotografia")
I don't know how to fix this error because when I click F12, it doesn't recognize any errors.
<div class="row">
        <div id="map"></div>
        <script>

            var map;
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 7,
                    center: { lat: 39.397, lng: -8 }
                });

                // setMarkers(map);
            }

            /*ignições
            var locations = [
                ["Recusado", "13/02/2019", 38.776816, -9.441833, 335, "foto.jpg",],
                ["Aceite", "15/08/2019", 38.817562, -8.941728, 36, "foto.jpg"],
                ["Em avaliação", "20/07/2019", 38.487978, -9.004425, 90, "foto.jpg"],
                ["Concluído", "01/07/2019", 37.045804, -8.898041, 12, "foto.jpg"]

            ];*/

            function setMarkers(map,lat, long, data, fotografia) {
                var latlong = lat + "," + long;
                //var bounds = new google.maps.LatLngBounds();

                var marker;

                var contentString = '<div id="content">' +
                    '<div id="siteNotice">' +
                    '</div>' +
                    '<div id="bodyContent">' +
                    '<p><b>Avaliação da Ocorrência:</b></p>' +
                    '<p>Fotografias:' + fotografia + '</p>' +
                    '<p>Avaliação:</p>' +
                    '<p>Data:' + data + '</p></br>' +
                    '<button id="aceite" >Aceitar</button>' +
                    '<button id="recusado">Recusar</button>' +
                    //'<button> Em avaliação</button>' +
                    '<button id="concluido"> Concluído</button>' +
                    '</div>';
                var infoWindow = new google.maps.InfoWindow({
                    content: contentString
                });
                var myLatLgn = new google.maps.LatLng(lat, long);

                marker = new google.maps.Marker({
                    position: myLatLgn,
                    map: map,
                    info: contentString,
                    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'

                });
                //bounds.extend(marker.getPosition());

                google.maps.event.addListener(marker, 'click', function () {
                    marker = this;
                    infoWindow.setContent(this.info);
                    google.maps.event.addListener(infoWindow, 'domready', function () {

                        google.maps.event.addDomListener(document.getElementById("recusado"), 'click', function (e) {
                            marker.setMap(null);
                        })

                        google.maps.event.addDomListener(document.getElementById("aceite"), 'click', function (e) {
                            marker.setIcon('https://maps.google.com/mapfiles/marker_green.png');
                        })

                        google.maps.event.addDomListener(document.getElementById("concluido"), 'click', function (e) {
                            marker.setIcon('https://maps.google.com/mapfiles/marker_grey.png');

                        })
                    });
                    infoWindow.open(map, this);
                });
            }
           // map.fitBounds(bounds);

        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABFYXhqed9HKYt20cFIqQ6nmmPDZTr09c&callback=initMap"
                async defer></script>

    </div>

    latitude: <input id="latitude" type="text" /> <br />
    longitude: <input id="longitude" type="text" /> <br />
    data: <input id="data" type="text" /> <br />
    fotografia: <input id="fotografia" type="text" /> <br />
    <input id="marcar" type="button" value="Marcar"
           onclick="setMarkers(map.value,latitude.value, longitude.value, data.value, fotografia.value)" />

I just want to input some informations like "latitude", "longitude", "data" and "fotografia", and based on that information, mainly latitude and longitude, it's placed a marker on the map with its infowindow.

A:

You have a typo in your click listener function's arguments:
<input id="marcar" type="button" value="Marcar"
       onclick="setMarkers(map.value,latitude.value, longitude.value, data.value, fotografia.value)" />

Should be (you want to pass in the map variable, not map.value):
<input id="marcar" type="button" value="Marcar"
       onclick="setMarkers(map, latitude.value, longitude.value, data.value, fotografia.value)" />

proof of concept fiddle

code snippet:

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

.row {
  height: 60%;
}
<div class="row">
  <div id="map"></div>
  <script>
    var map;

    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: {
          lat: 39.397,
          lng: -8
        }
      });
    }

    function setMarkers(map, lat, long, data, fotografia) {
      console.log("lat=" + lat + " long=" + long + " data=" + data + " fotografia=" + fotografia);
      var latlong = lat + "," + long;
      //var bounds = new google.maps.LatLngBounds();



      var marker;

      var contentString = '<div id="content">' +
        '<div id="siteNotice">' +
        '</div>' +
        '<div id="bodyContent">' +
        '<p><b>Avaliação da Ocorrência:</b></p>' +
        '<p>Fotografias:' + fotografia + '</p>' +
        '<p>Avaliação:</p>' +
        '<p>Data:' + data + '</p></br>' +
        '<button id="aceite" >Aceitar</button>' +
        '<button id="recusado">Recusar</button>' +
        //'<button> Em avaliação</button>' +
        '<button id="concluido"> Concluído</button>' +
        '</div>';
      var infoWindow = new google.maps.InfoWindow({
        content: contentString
      });
      var myLatLgn = new google.maps.LatLng(lat, long);

      marker = new google.maps.Marker({
        position: myLatLgn,
        map: map,
        info: contentString,
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'

      });
      //bounds.extend(marker.getPosition());

      google.maps.event.addListener(marker, 'click', function() {
        marker = this;
        infoWindow.setContent(this.info);
        google.maps.event.addListener(infoWindow, 'domready', function() {

          google.maps.event.addDomListener(document.getElementById("recusado"), 'click', function(e) {
            marker.setMap(null);
          })

          google.maps.event.addDomListener(document.getElementById("aceite"), 'click', function(e) {
            marker.setIcon('https://maps.google.com/mapfiles/marker_green.png');
          })

          google.maps.event.addDomListener(document.getElementById("concluido"), 'click', function(e) {
            marker.setIcon('https://maps.google.com/mapfiles/marker_grey.png');

          })
        });
        infoWindow.open(map, this);
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

</div>



latitude: <input id="latitude" type="text" value="39.397" /> <br /> longitude: <input id="longitude" type="text" value="-8.001" /> <br /> data: <input id="data" type="text" value="data" /> <br /> fotografia: <input id="fotografia" type="text" value="fotografia"
/> <br />
<input id="marcar" type="button" value="Marcar" onclick="setMarkers(map, latitude.value, longitude.value, data.value, fotografia.value)" />

