Is it possible to drag Google maps marker and drop it in ListView?

Question

I am trying to catch data from Google Maps Marker, and want to know is it possible to drag Markers to ListView(below link) then access the (lat, lng) or place name etc. data ?

http://imgur.com/l4DKnZu

Answer 1

Here is a possibility. It's not specifically Android, but it might be useful, maybe.

So, when the client drags the marker 60 pixel from the border of the map, the map starts panning. So, at that 60 pixel point, I get the markers out. Okay for you?

<style>
  table {
    width: 100px;
    float: right;
    height: 500px;
  }
  table tr {
    height: 20%;
  }
</style>

<table id="mytable" border="1">
  <tr><td id="hello">Hello</td></tr>
  <tr><td id="world">World</td></tr>
  <tr><td id="foo">Foo</td></tr>
  <tr><td id="bar">Bar</td></tr>
</table>
<div id="map" style="height: 500px;"></div>
<input id="dragged"><br>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var locations = [ // some points in/close to Belgium
  [50,    4],
  [50.5,  4.5],
  [51,    5],
  [51.5,  5.5]
];
var numberOfCels = 4;    // ADAPT to your number of cells !
var markers = [];
function initialize() {
    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(50.5,  4.5),
        zoom: 7,
        mapTypeId: 'roadmap'
    });
    // generate the markers
    for (var i in locations) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map,
        draggable: true,
        title: 'marker ' + i
      });

      google.maps.event.addListener(marker, 'dragend', function() {
        // maybe you want to do something here
      })

      google.maps.event.addListener(marker, 'drag', function() {
        var pixelPosition =  getPixelPosition(this);
        var index = markers.indexOf(this);
        if (pixelPosition.right <= 60) {// Get the marker out of the map
          // get the height
          switch ( Math.floor(numberOfCels * pixelPosition.y / document.getElementById("map").clientHeight ) ) {
            default:
            case 0:
              document.getElementById("hello").innerHTML =  'marker ' + index ;
              break;
            case 1:
              document.getElementById("world").innerHTML =  'marker ' + index ;
              break;
            case 2:
              document.getElementById("foo").innerHTML =  'marker ' + index ;
              break;
            case 3:
              document.getElementById("bar").innerHTML =  'marker ' + index ;
              break;
          }
          // remove the marker from the map
          this.setMap(null);
        }
        document.getElementById("dragged").value = 'x: ' + pixelPosition.x +' - right:'+ pixelPosition.right;
      })
      // store the variable in the array
      markers.push(marker);
    }

    /**
    *  returns how many pixels the marker is from the map
    *  @see https://gist.github.com/keannan5390/3996774  (adapted by me)
    */
    function getPixelPosition (marker) {
      var scale = Math.pow(2, map.getZoom());
      var nw = new google.maps.LatLng(
        map.getBounds().getNorthEast().lat(),
        map.getBounds().getSouthWest().lng()
      );
      var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
      var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
      var pixelOffset = new google.maps.Point(
        Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
        Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
      );
      return {
        x: pixelOffset.x,
        y: pixelOffset.y,
        right:  document.getElementById("map").clientWidth - pixelOffset.x,
        bottom: document.getElementById("map").clientHeight - pixelOffset.y
      };
    }

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

When all is operational, remove everything having to do with id="dragged"; it's just to display what's happening.