2

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

2 Answers 2

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();
 })
3
  • Hi, where's the click? May 10, 2017 at 11:09
  • wait I am upding the code.. May 10, 2017 at 11:16
  • I will remove this link after 1 hour. Please check it. May 10, 2017 at 12:05
1

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.

2
  • 1
    Don't forget Drupal is open source - if you think the documentation should have an example like this, you can submit it
    – Clive
    May 10, 2017 at 18:20
  • True :) However, this was just my experiment and I do not have knowledge whether this is the correct method. It's works but maybe it could be done easier way. Maybe I'll make a request to module author and hope to get response. May 12, 2017 at 10:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.