How to create new markers into a Google map with click? I want to add a marker on click event and add it into exact location where user clicked on map.

Can't use any of the official examples which eventually return nothing.

My current module specific js code is as follows (just trying to build it step by step):

(function ($) {
  Drupal.behaviors.gmapPage = {
    attach: function(context, settings) {

      // Get map object / instance
      var map = Drupal.gmap.getMap($('.gmap-gmap').attr('id')); 

      // Is this available in some other way?
      console.log(map); // Prints Drupal.gmap.map, but map != Drupal.gmap.map

      google.maps.event.addListener(map, 'click', function (e) {
        console.log(e.latLng);
      });

    }
  };
})(jQuery);


Everything else is fine but cannot create any functionality for the map.
Such an easy development task which seems so unbelievably challenging... 

And this is purely for the front-end /ui - this question isn't about how to save location, load them into map etc. back-end related.

UPDATE:

I've added following script just for testing purposes:

(function ($) {
    Drupal.behaviors.gmapPage = {
        attach: function(context, settings) {

          // Get map object / instance
          var map = Drupal.gmap.getMap(settings.gmap.auto2map.id);
          // Following works although e is undefined
          // if 'ready' is changed to 'click' nothing happens
          map.bind('ready', function (e){
                console.log(e, 'map is ready');
          });

       }
    };
})(jQuery);
This is working example at my side please check here Demo

function initCentraDistrictmap()
{   
var mapOptions = {  
zoom: 12,
center: new google.maps.LatLng(1.3050618171691895, 103.8240737915039),
mapTypeId: 'roadmap'
 };
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

google.maps.event.addListener(map, "click", function (event) {

var myLatLng = new google.maps.LatLng(event.latLng.lat(),event.latLng.lng());
var image = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2246%22%20height%3D%2244%22%3E%0A%3Ccircle%20cx%3D%2223%22%20cy%3D%2222%22%20r%3D%2220%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20fill%3D%22%23ff3019%22/%3E%0A%3Ctext%20transform%3D%22translate%2823%2025%29%22%20fill%3D%22%23fff%22%20style%3D%22font-family%3A%20Arial%2C%20sans-serif%3Bfont-weight%3Abold%3Btext-align%3Acenter%3B%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%3ETesting%3C/text%3E%0A%3C/svg%3E';
var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image// baseURL + 'assets/drawsvg.svg'
  });
});
}
 $(document).ready(function(){
  initCentraDistrictmap();
 })