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??

Not work!

I don`t know why and where i need to put these options.

draggable: true,
 animation: google.maps.Animation.DROP

Currently this is here

$(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,
      draggable: true,
      animation: google.maps.Animation.DROP
    });

Not in map.. You need to put these options in createMarker()

I dodn`t copy - I don`t have these option in my source! Can You show sample source?

This appears in here

marker = new google.maps.Marker({
      map:map,
      draggable:true,
      animation: google.maps.Animation.DROP,
      position: parliament
    });

but in my source there are no

marker = new google.maps.Marker({...

I said that I try put this function between line 83 and line 86 but it doesn`t work.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.