We implemented a custom CKEditor map widget with Drupal before using HERE Maps API. The idea is that the map widget will have a DIV element as its widget's template and map placeholder. HERE Maps will then retrieve the DIV's DOM reference and attach a map on it every time we insert a new widget. It's working as intended: map tiles are showing, map events (zoom & panning) are working, as well as the markers events (popping-up the markers bubble windows when hovering or clicking them). Hence, we didn't set the "mask" widget property on the map widget so that we could interact with the map's native events (zooming the map when double-clicking or using mouse wheel, panning the map using the mouse or map's navigation buttons, etc). Everything worked as intended across all browsers.
Recently, we then migrated to Google Maps API, nothing much changed in the widget structure except the map objects/methods used. After migration, all aspects of map worked fine except the marker's click/hover behavior doesn't fire as intended. We could zoom the map and pan the map using the mouse movements/wheel or clicking the map navigation buttons, but when clicking a marker or hovering near on it, the marker's pop-up window/bubble doesn't show. Also, the mouse doesn't get converted to a pointer cursor which is the usuall behavior of Google Maps and indicates that there's something in the map that is clickable.
Likewise, we then later found out that marker's click/hover behavior works in Firefox (see Firefox - Marker Hover and Click.png), but it doesn't work in Chrome/Safari, or maybe generally on Webkit-based browsers (see Chrome - Marker Hover & Click.png). It seems that the map in our custom Google Map widget is being "masked" thus you could only click the map but not the marker or maybe the marker hover/click events don't bubble up properly or communicate with CKEditor event system. And one question that arises is that why map zoom button click works in Chrome but marker click doesn't, yet they're both inside the map/widget DIV. What could be the possible culprit here: Google Maps API, CKEditor, Webkit engine, or their interactions?
We would appreciate if you could give us some ideas/hints, useful links/related issues, or possible directions on how to resolve this issue.
UPDATE:
For debugging purposes, we notice also that this query returns an object in Firefox, but it's empty/undefined in Chrome/Safari:
jQuery('iframe.cke_wysiwyg_frame').contents().find('.custom-widget-class img[src="custom-marker-path.png"]');Similar results with this query (works in Firefox, but not in Chrome/Safari):
jQuery('.custom-widget-class img[src="custom-marker-path.png"]');Using the above codes, our custom Google Maps marker/icon has a path of "custom-marker-path.png" but apparently it's not attached properly in the DOM tree of the document when using Chrome/Safari. It's being rendered/visible in the map, but it's object reference doesn't exist that's why our hover/click event handlers don't work also because in the first place they could not bind to the "empty" marker/jQuery reference. Note that outside of CKEditor (including the rendered page after you save the changes in CKEditor), our code works in all browsers (Firefox, Chrome, Safari). Hence, we've established that the issue is most likely related to the CKEditor environment.
