0

When using Google Map Custom Overlay to add pop over with input text boxes as seen below, when I try to click on the input box on IE Edge 15 (Haven't tested on other IE versions) I can't click on it and start typing as if it won't set focus on the input box.

It does works on Chrome though.

CustomMarker.prototype.onAdd = function() {
  var self = this;
  var div = this.div;
  if (!div) {
    // Generate marker html
    div = this.div = document.createElement('div');
    div.className = 'custom-marker';
    div.style.position = 'absolute';
    div.innerHTML = '<span><input type="text" value="asfd" style="padding:10px;font-size:18px;" /></span>';
    var innerDiv = document.createElement('div');
    innerDiv.className = 'custom-marker-inner';

    div.appendChild(innerDiv);

    if (typeof(self.args.marker_id) !== 'undefined') {
      div.dataset.marker_id = self.args.marker_id;
    }

    google.maps.event.addDomListener(div, "click", function(event) {
      google.maps.event.trigger(self, "click");
    });

    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
  }
};

Full example code here - jsfiddle

I am wondering if my implementation above is wrong or this is a bug from Google Map? [Edit: or is there a work around?]

forestclown
  • 1,582
  • 4
  • 25
  • 39

1 Answers1

1

I've forked your fiddle. It might be a bit hacky, but I've updated the click event to focus on the input:

google.maps.event.addDomListener(div, "click", function(event) {
    google.maps.event.trigger(self, "click");
    event.target.focus();
});

https://jsfiddle.net/ng4hxqfs/5/

mdon88
  • 313
  • 1
  • 12
  • Thanks, but in my real life production environment, there will be more than one input text boxes. – forestclown Sep 04 '17 at 14:54
  • That should still work then? The div is within the scope of the marker and I'm not getting all inputs, just the ones on the marker current marker being clicked. – mdon88 Sep 04 '17 at 14:56
  • I've updated my answer to handle multiple inputs. The styling is a off but proves it should work. – mdon88 Sep 04 '17 at 15:32
  • Quickly tested, it works, will try again tomorrow morning. – forestclown Sep 04 '17 at 15:41