How to create new markers into a Google map with click?

Question

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);

Answer 1

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();
 })

Answer 2

Well, after a one days work I figured it out. Perhaps this could have been explained by Google maps module developer in 5 minutes and/or with a clear documentation.

Following script solved it:

(function ($) {
Drupal.behaviors.gmapPage = {
    attach: function(context, settings) {
         // Get "some" map object: Drupal.gmap.getMap(settings.gmap.[id/key provided by module you use].id)
         var map = Drupal.gmap.getMap(settings.gmap.auto2map.id);
         // Bind it with ready function; did not work without it
         map.bind('ready', function(){
            // Now you can have the real map instance
            gMapInit = Drupal.gmap.getMap(settings.gmap.auto2map.id).map;
            // And no - it doesn't work if you change it in the beginning
            // e.g. var map = Drupal.gmap.getMap(settings.gmap.auto2map.id).map;                
         });
      }
    };
})(jQuery);

I've got to admit that this is rather pointless work to do since everything could be documented. Especially this kind of starting point developer documentation should be available.