Refresh in database

2

This is the following, I have a map where are generated several points, thus mapping a route ... But now I need to edit these points by the map itself, like I have to do in a way that I move the markers and automatically record in the database the latitude and longitude of the point I'm moving ...

<scripttype="text/javascript">
    jQuery(function() {

        var stops = [];

        $('.waypoints').each(function() {
            lat = $(this).attr('lat') * 1;
            lon = $(this).attr('lon') * 1;

            stops.push({"Geometry": {"Latitude": lat, "Longitude": lon}});
        });

        console.log(stops);

        var map = new window.google.maps.Map(document.getElementById("map"));
        var directionsDisplay = new window.google.maps.DirectionsRenderer();
        var directionsService = new window.google.maps.DirectionsService();

        directionsDisplay.setPanel(document.getElementById("directionsPanel"));
        Tour_startUp(stops);

        window.tour.loadMap(map, directionsDisplay);
        window.tour.fitBounds(map);

        if (stops.length > 1)
            window.tour.calcRoute(directionsService, directionsDisplay);
    });

    function Tour_startUp(stops) {
        if (!window.tour)
        window.tour = {
            updateStops: function(newStops) {
            stops = newStops;
            },
            // map: google map object
            // directionsDisplay: google directionsDisplay object (comes in empty)
            loadMap: function(map, directionsDisplay) {
                var myOptions = {
                zoom: 13,
                center: new window.google.maps.LatLng(-3.056833, -60.004703), // default to Manaus
                mapTypeId: window.google.maps.MapTypeId.ROADMAP
                };
                map.setOptions(myOptions);
                directionsDisplay.setMap(map);
            },

            fitBounds: function(map) {
                var bounds = new window.google.maps.LatLngBounds();

                // extend bounds for each record
                jQuery.each(stops, function(key, val) {
                    var myLatlng = new window.google.maps.LatLng(val.Geometry.Latitude, val.Geometry.Longitude);
                    //console.log(myLatlng);return
                    bounds.extend(myLatlng);
                });
                map.fitBounds(bounds);
            },

            calcRoute: function(directionsService, directionsDisplay) {
                var batches = [];
                var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
                var itemsCounter = 0;
                var wayptsExist = stops.length > 0;

                while (wayptsExist) {
                    var subBatch = [];
                    var subitemsCounter = 0;

                    for (var j = itemsCounter; j < stops.length; j++) {
                        subitemsCounter++;
                        subBatch.push({
                            location: new window.google.maps.LatLng(stops[j].Geometry.Latitude, stops[j].Geometry.Longitude),
                            stopover: true
                        });
                        if (subitemsCounter == itemsPerBatch)
                            break;
                        console.log(stops[j].Geometry.Latitude);
                    }

                    itemsCounter += subitemsCounter;
                    batches.push(subBatch);
                    wayptsExist = itemsCounter < stops.length;
                    // If it runs again there are still points. Minus 1 before continuing to
                    // start up with end of previous tour leg
                    itemsCounter--;
                }

                // now we should have a 2 dimensional array with a list of a list of waypoints
                var combinedResults;
                var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
                var directionsResultsReturned = 0;

                for (var k = 0; k < batches.length; k++) {

                    var lastIndex = batches[k].length - 1;
                    var start = batches[k][0].location;
                    var end = batches[k][lastIndex].location;

                    // trim first and last entry from array
                    var waypts = [];
                    waypts = batches[k];
                    waypts.splice(0, 1);
                    waypts.splice(waypts.length - 1, 1);

                    var request = {
                        origin: start,
                        destination: end,
                        waypoints: waypts,
                        travelMode: window.google.maps.TravelMode.DRIVING
                    };
                    //console.log(request);
                    (function(kk) {
                        directionsService.route(request, function(result, status) {
                            if (status == window.google.maps.DirectionsStatus.OK) {
                                var unsortedResult = {order: kk, result: result
                            };
                            unsortedResults.push(unsortedResult);

                            directionsResultsReturned++;

                            if (directionsResultsReturned == batches.length){ // we've received all the results. put to map
                                // sort the returned values into their correct order
                                unsortedResults.sort(function(a, b) {
                                    return parseFloat(a.order) - parseFloat(b.order);
                                });
                                var count = 0;
                                for (var key in unsortedResults) {
                                    if (unsortedResults[key].result != null) {
                                        if (unsortedResults.hasOwnProperty(key)) {
                                            if (count == 0) // first results. new up the combinedResults object
                                                combinedResults = unsortedResults[key].result;
                                            else {
                                                // only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
                                                // directionResults object, but enough to draw a path on the map, which is all I need
                                                combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
                                                combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);

                                                combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
                                                combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
                                            }
                                            count++;
                                        }
                                    }
                                }
                                directionsDisplay.setDirections(combinedResults);
                                }
                            }
                        });
                    })(k);
                }
            }
        };
    }
</script>
    
asked by anonymous 09.07.2014 / 15:31

1 answer

2

I'll give you just the way of the thing, the question is very broad.

To make the markers draggable:

Source: link

var rendererOptions = { draggable: true}
var directionsDisplay = new window.google.maps.DirectionsRenderer(rendererOptions);

Create an Event listener at map initialization to know that the marker has changed:

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    salvaNoBd(directionsDisplay.getDirections());
});

Declare the function called by the Event Listener:

Source: link

function salvaNoBd(coordenadas) {
    $.post( "examplo.php", coordenadas);
}

Then just treat the coordinates sent by the post in php, asp, or whichever language you use to communicate with the database, a detail, is that you need to implement a way to pass an ID for each marker, and use this ID as the parameter of the post as well.

But in the way you are doing, you are going to the DOM, without any identification, and this you will need to implement in your code, as I do not have it in full, I can not answer you in full. >     

09.07.2014 / 18:17