create two markers with drag drop in google maps api

Question

Fala galera,

I’m creating a map where the idea is that the person can insert a pin in it and then in the sequence insert another pin, when he inserts the second pin, a line between the two pins would appear stating the distance between them. I would save the lat/long of the two pins in a mysql to display several 'two-point paths' on the map. Does anyone have any idea how I could do that ?

Answer 1

Creating a map and adding 2 "draggable markers":

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker1 = new google.maps.Marker({
    position: myLatlng1,
    map: map,
    draggable:true,
    title:"Marcador 1"
    });

  var marker2 = new google.maps.Marker({
        position: myLatlng2,
        map: map,
        draggable:true,
        title:"Marcador 2"
    });

Calculate distance:

function CalcularDistancia(latlng1, latlng2) {
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix(
        {
            origins: [latlng1],
            destinations: [latlng2],
            travelMode: google.maps.TravelMode.DRIVING // mude de acordo com seu proposito
        }, callback);
    }
function callback(response, status) {
        if (status == google.maps.DistanceMatrixStatus.OK) {
            alert("Distância:" + response.rows[0].elements[0].distance.text);

        }
    }