Drag and Drop Jquery to Google Map V3

Question

Scenario:

I want to be able to drop items to Google Map & used the searchbox at the same time. Dragged "New York" (ui.draggable.text()) listed draggable item into Google map, it'll pull up the New York center in the good map.

Result:

It works but it covers the original "Place Search box" and I lose the searchbox completely since it populates a new map... Not sure how to adjust the below code so I save up all the dropped item + options to remove and keep the searchbox

Droppable div on the map:

$('.dropit').droppable({
        drop: function(event, ui) {

            geocoder = new google.maps.Geocoder();
            var address = ui.draggable.text();
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                } else {
                  alert('Geocode was not successful for the following reason: ' + status);
                }
            });

            var mapOptions = {
               // center:  ui.draggable.text().geometry.location(),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            //ui.draggable.text() DISPLAY THIS ON MAP
        }
    });

You should provide complete code and an example [jsfiddle](http://jsfiddle.net). — MrUpsidown, Feb 12 '15 at 15:13
Darn, not sure how to set up jsfiddle lol... even basic google map loading gives me a headache — MilkACow, Feb 12 '15 at 15:42
Here is a base map if you need: http://jsfiddle.net/upsidown/Lw6tF/ — MrUpsidown, Feb 12 '15 at 16:12

score 0 · Accepted Answer · answered Feb 12 '15 at 16:30

Not sure I understand your question clearly but here is an example map on which you can drag & drop a location item and use the Places Search box at the same time.

HTML:

<div id="map-canvas"></div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<ul>
    <li>New York, USA</li>
    <li>Shanghai, PRC</li>
    <li>London, UK</li>
    <li>Paris, France</li>
    <li>Sydney, Australia</li>
</ul>

JavaScript (drag & drop):

$("ul li").each(function () {
    $(this).draggable({
        cursor: 'move',
        revert: true
    });
});

$('#map-canvas').droppable({

    drop: function (event, ui) {

        var el = ui.draggable;

        codeAddress(el.text());
        el.remove();
    }
});

JavaScript (place search):

function codeAddress(address) {

    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

Below is a working demo.

JSFiddle demo

Drag and Drop Jquery to Google Map V3

1 Answers1