Of course, Yesterday I ask for help for my google map route creator. And of coure, I made my google maps route creator source.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
MM={
markers:[],
init:function(map){
this.map=map;
this.dirserv=new google.maps.DirectionsService();
this.dir=new google.maps.DirectionsRenderer();
},
add:function(ll){
var marker=new google.maps.Marker({position:ll,map:this.map});
this.markers.push(marker);
return marker;
},
remove:function(marker){
for(var i in this.markers){
if(this.markers[i]==marker){
marker.setMap(null);
this.markers.splice(i,1);
}
}
},
clear:function(){
for(var i in this.markers){
this.markers[i].setMap(null);
}
this.markers=[];
},
refreshRoute:function(){
var self=this;
var m=this.markers;
var l=m.length;
if (l>1){
var waypoints=[];
for(var i=1;i<l-1;i++){
waypoints.push({
location:m[i].position,
stopover:true
});
}
var request = {
origin:m[0].position,
destination:m[l-1].position,
waypoints: waypoints,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
this.dirserv.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
self.dir.setDirections(result);
self.dir.setMap(self.map);
}
});
} else {
this.dir.setMap(null);
}
},
getRoute:function(){
var resp=[];
for(var i in this.markers){
var pos=this.markers[i].position;
resp.push([pos.lat(),pos.lng()]);
}
return resp;
},
setRoute:function(route){
this.clear();
for(var i in route){
this.add(new google.maps.LatLng(route[i][0],route[i][1]));
}
}
}
$(function(){
var map = new google.maps.Map($('#map').get(0),{
zoom: 12,
center: new google.maps.LatLng(56.94, 24.12),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
MM.init(map);
//event for create an marker
google.maps.event.addListener(map, 'click', function(e) {
var marker=MM.add(e.latLng);
//retrieve route data after marker creation
MM.refreshRoute();
//event for delete marker
google.maps.event.addListener(marker, 'click', function(e){
MM.remove(marker);
MM.refreshRoute();
});
});
$('#clear').click(function(){
MM.clear();
MM.refreshRoute();
});
$('#save').click(function(){
alert(MM.getRoute());
});
$('#load').click(function(){
MM.setRoute([[56.96,24.125],[56.945,24.073],[56.91,24.118],[56.95,24.187]]);
MM.refreshRoute();
});
});
</script>
</head>
<body>
<div id="map" style="width:700px; height:700px;"></div>
<button id="clear">Clear</button>
<button id="save">Save</button>
<button id="load">Load</button>
</body>
</html>Now i need anyone help:
1) Make markers draggable and animate;
2) Store, retrieve and delete route and marker positions to database;
3) Automatic route calculations (total route lenght and lenght between markers).
Can anyone help me to create file for databas synchronisation and retrieve data from database??