Question

I have a somewhat interesting problem I am having a hard time figuring out. I am implementing a draggable div from outside the map, and would like to drag it onto the map. I have gotten as far as triggering the event and grabbing the position of the drop, but now I need to translate that into something the map will understand.

Is there a way to convert the values returned by .position() into a latlng or point that google maps will understand? I have been messing with the map projections, but can’t seem to get it to work relative to the viewport on the map. Any point in the right direction would be terrific.

$('#map').droppable({
        drop: function(e, ui) {
            console.log(e);
            console.log(ui);
            var rawMouseLocation = $('#map').mapPlugin('mouseLocation', ui.position);


            mouseLocation = rawMouseLocation.toString().replace(/[()]/g,'')
            var field = $(ui.draggable[0]).data('fieldID');
            var iconPath = $(ui.draggable[0]).find('img').attr('src');

            $('.'+field).val(mouseLocation).removeClass('default-text');
            var layerName = $('#map').mapPlugin('addNewFieldLayer',field, rawMouseLocation, {
                "iconPath":iconPath, 
                'onDragEnd':self.updateField
                });
            newLayers.push(layerName); 
            $(ui.draggable).draggable( 'disable' );
        }
    });

Inside of the ‘mouseLocation’ function, I need a way to convert that position into the map coordinates. I am not even sure this is possible, but any help would be greatly appreciated. Thanks.

Answer 1

I was able to come up with a solution which uses the map overlayView.

 // bunch of stuff to get an overlay set up to convert a pixel location to a lat/long
            MyOverlay.prototype = new google.maps.OverlayView();
            MyOverlay.prototype.onAdd = function() { }
            MyOverlay.prototype.onRemove = function() { }
            MyOverlay.prototype.draw = function() { }
            function MyOverlay(map) { this.setMap(map); }

            overlay = new MyOverlay(aMap);

            google.maps.event.addListener(aMap, 'idle', function() { 
                // Get projection
                projection = overlay.getProjection();
            })

and then in my mouseLocation function, I do this:

  // need to convert mouse location into a lat/long point
         var point = new google.maps.Point(eventPosition.pageX, eventPosition.pageY);
            var latlng= projection.fromContainerPixelToLatLng(point);
            return latlng;

which has the latlng of the mouse location! Thanks! @Vesliq