How can I make a google marker in Maps Javascript api?

Question

I'm working on google maps api.The map shows the latitude and longtitude by mouse click event. Now I want to make a google marker. Here is my Javascript code:

<script>
      function initMap() {
        var myLatlng = {lat: 23.133899799999995, lng: 14.812842999999999};

        var map = new google.maps.Map(
            document.getElementById('map'), {zoom: 16, center: myLatlng});

        // Create the initial InfoWindow.
        var infoWindow = new google.maps.InfoWindow(
            {content: 'Click the map to get Lat/Lng!', position: myLatlng});
        infoWindow.open(map);

        // Configure the click listener.
        map.addListener('click', function(mapsMouseEvent) {
        // Close the current InfoWindow.
        infoWindow.close();

        // Create a new InfoWindow.
        infoWindow = new google.maps.InfoWindow({position: mapsMouseEvent.latLng});
        infoWindow.setContent(mapsMouseEvent.latLng.toString());
        infoWindow.open(map);
        
        //Show latitude and longtitude on the site
        var l =mapsMouseEvent.latLng.toString();
        document.getElementById("latlng").innerHTML=l;
        
        });   
      }
    </script>

Answer 1

See the example on adding markers: https://developers.google.com/maps/documentation/javascript/examples/marker-simple

var marker;
// Configure the click listener.
map.addListener('click', function(mapsMouseEvent) {
  // Close the current InfoWindow.
  infoWindow.close();

  if (marker && marker.setPosition)
    // if the marker already exists, move it
    marker.setPosition(mapsMouseEvent.latLng);
  else
    // create a blue marker
    marker = new google.maps.Marker({
      position: mapsMouseEvent.latLng,
      map: map,
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
    });
 });

function initMap() {
  var myLatlng = {
    lat: 23.133899799999995,
    lng: 14.812842999999999
  };

  var map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 16,
      center: myLatlng
    });
  var marker;
  // Create the initial InfoWindow.
  var infoWindow = new google.maps.InfoWindow({
    content: 'Click the map to get Lat/Lng!',
    position: myLatlng
  });
  infoWindow.open(map);

  // Configure the click listener.
  map.addListener('click', function(mapsMouseEvent) {
    // Close the current InfoWindow.
    infoWindow.close();

    if (marker && marker.setPosition)
      marker.setPosition(mapsMouseEvent.latLng);
    else
      marker = new google.maps.Marker({
        position: mapsMouseEvent.latLng,
        map: map,
        icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
      });

    //Show latitude and longtitude on the site
    var l = mapsMouseEvent.latLng.toString();
    document.getElementById("latlng").innerHTML = l;

  });
}

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

#map {
  height: 90%;
  width: 100%;
}

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