Question

I have the following code which lets the user plot two points on a Google MAP. I then want to be able to catch the event for each point(marker) being dragged to a new location. I am bad at Javascript and have spent hours trying to do this so I think it’s time I get some help..

What I am trying to do is get the user to plot two points(markers) draggable on the map. I then want to be able to have my script write the positions(lat,long) to the document. I will then calculate the distance between these as part of a shipping app I am making.

I would like to have the contents of the document (lat,long) updated when a marker(point) is dragged to a new location.

Also, I fixed a schoolboy error where the point vars were being decalred inside the switch statement. My problem is fixed by moving the Add event listener statements inside the switch statement. Thanks Cannonade 🙂

The next thing now is to try and calculate the distance (crow flies) between the two points

Again, thanks for you help.. appreciated as always!!

Updated Code that works:

        var map = null;
    var geocoder = null;
    var zoom = 15;
    var first_point = false;
    var boundary =  new Array();
    var cCount = 0;


    var point1;
    var point2;

    function initialize() {
        if (GBrowserIsCompatible()) {
            first_point = false;
            map = new GMap2(document.getElementById("map_canvas"));
            var center = new GLatLng(37.4419, -122.1419);
            map.setCenter(center, zoom);

            GEvent.addListener(map, "click", function(overlay,point)
            {
                if (overlay != null)
                {}
                else
                {
                    var n = boundary.length;

                    switch (cCount)
                    {
                        case 0:
                            point1 = new GMarker(point,{draggable: true});
                            map.addOverlay(point1);
                            cCount++;
                            GEvent.addListener(point1, "dragend", function()
                                {
                                    alert('P1 Dragged');
                                });
                            break;
                        case 1:
                            point2 = new GMarker(point,{draggable: true});
                            map.addOverlay(point2);
                            cCount++;
                            GEvent.addListener(point2, "dragend", function()
                                {
                                    alert('P2 Dragged');
                                });
                            break;
                        case 2:
                            map.clearOverlays();
                            cCount=0;
                            break;
                    }
                }
            });
            map.addControl(new GSmallMapControl());
            geocoder = new GClientGeocoder();
        }
    }

Answer 1

I have taken your code and made the following fixes:

• Fixed the unbalanced brackets I mentioned in the comment.
• Moved the two addListener calls into the switch statement so that the point1 and point2 variables are still in scope when you attach the events.

You can check out the example here (source).

Edit:

Here is some Javascript code to get the linear distance between two points (in meters):

/* Convert degress to radians */
function deg2rad(deg) {
  return deg / (180 / Math.PI);
}

/* Calculate distance between two points */
function point_distance(a, b) {
  var r = 6378700;
  var lat1 = a.y;
  var lat2 = b.y;
  var lon1 = a.x;
  var lon2 = b.x;
  var dist = r * Math.acos(Math.sin(deg2rad(lat1)) * Math.sin(deg2rad(lat2)) +
               Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
               Math.cos(deg2rad(lon1 - lon2)));
  return dist;
}

This is based on the approximate radius of the earth being 6378700m.