Google Maps draggable directions

by Arjan Haverkamp

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="directionsPanel"></div>
<div id="map"></div>

CSS

#map{
    width: 450px;
    height: 400px;
}
#directionsPanel {
  width: 200px;
  float: left;
}

JavaScript

var map;
var custom; 

var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(52.87916, 18.32910),
    mapTypeId: 'terrain'
};
var markers = [];

$(function() {
  map = new google.maps.Map($('#map')[0], myOptions);
  custom = new customDirectionsRenderer(new google.maps.LatLng(50.87916, 16.32910), new google.maps.LatLng(52.87916, 16.32910), map);
    
    //you have access to marker :)
    custom.startMarker.setTitle('POLAND!!');
});

function customDirectionsRenderer(startPoint, endPoint, map) {
    //!!!!! reference to our class
    var that = this;

    this.directionsDisplay = new google.maps.DirectionsRenderer({
        draggable: true,
        suppressMarkers: true,
        map: map
    });

    google.maps.event.addListener(this.directionsDisplay, 'directions_changed', function () {
        checkWaypoints();
    });

    this.directionsService = new google.maps.DirectionsService();

    var draggedMarker;
    var waypointsMarkers = new Array();
    this.map = map;
    this.polyline = '';
    this.polylinePoints = [];

    //<-- create Start and Stop Markers
    this.startMarker = new google.maps.Marker({
        position: startPoint,
        title: 'Start',
        map: map,
        draggable: true,
        optimized: false
    });

    this.endMarker = new google.maps.Marker({
        position: endPoint,
        title: 'End',
        map: map,
        draggable: true,
        optimized: false
    });
    //-->

    //<-- add events listeners to Start/Stop Markers
    google.maps.event.addListener(this.startMarker, 'dragend', dragEnd);
    google.maps.event.addListener(this.startMarker, 'dragstart', dragStart);
    google.maps.event.addListener(this.startMarker, 'drag', drag);
    google.maps.event.addListener(this.endMarker, 'dragend', dragEnd);
    google.maps.event.addListener(this.endMarker, 'dragstart', dragStart);
    google.maps.event.addListener(this.endMarker, 'drag', drag);
    //-->

    //<-- update directionsRenderer true - snap...