2
Here’s the thing, I have a map where several dots are generated, thus tracing a route... Only now I need to edit these points by the map itself, like I have to do it in a way that I move them markers and automatically record in the database the latitude and longitude of the point I’m moving...
<script type="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>
You need to implement an object collection, and assign an Id (even from the BD) to each Waypoint and Marker, when you move one, it will move an object, and this object needs a callback to send the coordinate via json/ajax to the database.
– Marcelo Aymone
I don’t know if this is the case with each Waypoint/Marker, or just Marker.
– Marcelo Aymone
But I still haven’t been able to get Mark(Waipoints) to move... you know how to do that ?
– Tafarel_Brayan
I’m making the necessary changes, to post a reply.
– Marcelo Aymone
Dude, here we have a problem, the initial positions, come from the DOM, if you change these coordinates, in the DOM, will remain this information, you declared the points as "stops". On the map when we change, it will lose the consistency of the DOM data, it would be interesting to post your HTML, to see what we can do for DOM present the same information when you drag a Marker, or maybe this is not even necessary, what do you think?
– Marcelo Aymone
<body>
 <?php
 $waypts='';
 foreach ($listaItinerario as $valor) {
 $waypts.="<input type='hidden' class='waypoints' name='local[]' lat='" . $valor['localLatitudePonto'.$x] . "' lon='" . $valor['localLongitudePonto'.$x] . "'>";
 } 
 /*NESTA LINHA ESTÁ SETADA A LONGOITUDE E LATITUDE DA EMPRESA*/
 $waypts.="<input type='hidden' class='waypoints' name='local[]' lat='-3.122993' lon='-59.980144'>";
 echo $waypts;
 ?>
 <div class="contentMap"></div> 
 <div id="map"></div>
 <div class="contentMap"></div> 
</body>
– Tafarel_Brayan