How can I drag an icon inside google maps?

Question

I would like to be able to have an icon, placed outside of a google map. Then i would like to have this icon dragged and dropped INTO google maps and use it as a google maps

Answer 1

The accepted answer contains some obfuscated code. It took me quite a lot of time to find something a bit more tangible so since this answer comes up first in google search I thought will share something for a good start.

Note: window.map is where I store reference to my map. Also for cross-browser compatibility I am using jquery-ui draggable (was already included in my project so why not reusing it).

    var pixelToLatlng = function(xcoor, ycoor)
    {
        var ne = window.map.getBounds().getNorthEast();
        var sw = window.map.getBounds().getSouthWest();
        var projection = window.map.getProjection();
        var topRight = projection.fromLatLngToPoint(ne);
        var bottomLeft = projection.fromLatLngToPoint(sw);
        var scale = 1 << window.map.getZoom();

        var newLatlng = projection.fromPointToLatLng(new google.maps.Point(xcoor / scale + bottomLeft.x, ycoor / scale + topRight.y));
        return newLatlng;
    };

    $(".draggable").draggable(
    {
        helper: "clone",
        appendTo: window.map.getDiv(),
        cursorAt: { left: 5, top: 5 },
        stop: function(event, ui)
        {
            var wrapper = $(window.map.getDiv());
            var map_div_pos = wrapper.offset();
            var map_div_border_left = parseInt(wrapper.css("border-left-width"),10);
            var map_div_border_top = parseInt(wrapper.css("border-top-width"),10);

            var mouse_pos = ui.helper.offset();
            lat_lng = pixelToLatlng(mouse_pos.left - map_div_border_left - map_div_pos.left, mouse_pos.top - map_div_border_top - map_div_pos.top);

            window.add_group_marker = new google.maps.Marker(
            {
                position: lat_lng,
                map: window.map,
                zIndex: Math.round(lat_lng.lat()*-100000)<<5
            });
        }
    });

---

Credits:

• pixelToLatlng was found here: http://www.magicalrosebud.com/how-to-use-googlemaps-api-frompointtolatlng/

• Hints on calculating x/y when using jquery-ui draggable: How do I get position x and y from jQuery ui draggable?