Google Maps Split Route Tool

[Map Height : Small - Medium - Large]

Description

There is a need, when creating routes, to allow a new marker to be inserted into the route between points that have already been input. This can be achieved by splitting a single polyline into two polylines and adding a new marker mid-way between them. From then on the user can then drag each marker to a different location.

How To Use

  1. Draw a route by clicking points sequentially
  2. Once you have 2 or more points you can click the [Make a Split] option to start the split function
  3. Click the first...
  4. ...And second points in between which you wish to make the split. The order in which you click (1,2 or 2,1) is not important
  5. Drag the new marker (if required) to the correct location

How it Works


var map;
var messagediv=document.getElementById('messagediv');
var routePoints=new Array(0);
var routeMarkers=new Array(0);
var routePath;
var temp = new Array();
var markers=[];
var lines=[];
var polygonPoints=[];
var polygon=null;
var lineColor="#ff0000";
var lineWidth=1;

var mode=0;
var splitpoint1;
var splitpoint2;
var listner;

function initialize()
{
messagediv.innerHTML='Loading ...';
var latlng = new google.maps.LatLng(0,0);
var myOptions = {zoom:2,center:latlng,mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},draggableCursor:'crosshair'};
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
listner=google.maps.event.addListener(map, 'click', clickmap);
messagediv.innerHTML='Ready';
}

function clickmap(event)
{
if (mode==0)
{
routePoints.push(event.latLng);
messagediv.innerHTML="Adding Point ("+(routePoints.length)+")...";
CheckPointsForSplit(routePoints.length);
var marker=placeMarker(event.latLng,routePoints.length);
routeMarkers.push(marker);

//remove old polyline first
if (!(routePath==undefined))
{
routePath.setMap(null);
}
routePath=getRoutePath();
routePath.setMap(map);

CheckPointsForSplit(routePoints.length);
}
}

function placeMarker(location,number)
{
var iconFile = 'https://www.daftlogic.com/images/gmmarkersv3/stripes.png';
var marker = new google.maps.Marker({position:location,map:map,icon:iconFile,title:number.toString(),draggable:true});

google.maps.event.addListener(marker, 'dragend', function(event)
{
routePoints[number-1]=event.latLng;
//remove polyline
routePath.setMap(null);
//add new polyline
routePath=getRoutePath();
routePath.setMap(map);
});

google.maps.event.addListener(marker, 'click', function(event)
{
if (mode==2)
{
messagediv.innerHTML="Splitting";
splitpoint2=event.latLng;
SplitRoute(splitpoint1,splitpoint2);
mode=0;

}
if (mode==1)
{
messagediv.innerHTML="Click on the second marker";
mode=2;
splitpoint1=event.latLng;
}
});

return marker;
}

function getRoutePath()
{
var routePath = new google.maps.Polyline({
path: routePoints,
strokeColor: lineColor,
strokeOpacity: 1.0,
strokeWeight: lineWidth,
geodesic: true
});
return routePath;
}

function SplitRoute(pnt1,pnt2)
{
var midpoint=geo.math.midpoint(pnt1,pnt2);
var midpoint = new google.maps.LatLng(midpoint.lat(),midpoint.lng());
var tmppoints=[];
var insertpoint=getlowestbetween(getindexofpoint(pnt1),getindexofpoint(pnt2));

for(var i=0;i<routePoints.length;++i)
{
tmppoints.push(routePoints[i]);
if (i==insertpoint)
{
tmppoints.push(midpoint);
}
}

routePoints=tmppoints;
redisply();
messagediv.innerHTML="Split Complete";
}

function redisply()
{
if (routeMarkers)
{
for (i in routeMarkers)
{
routeMarkers[i].setMap(null);
}
}
routeMarkers=new Array(0);
//remove polyline
if (!(routePath==undefined))
{
routePath.setMap(null);
}

routePath=getRoutePath();
routePath.setMap(map);

if (routePoints)
{
var count=1;
for (i in routePoints)
{
var marker=placeMarker(routePoints[i],count);
routeMarkers.push(marker);
count++;
}
}
}

function getlowestbetween(i1,i2)
{
if (i1>i2)
{
return (i2);
}
else
{
return (i1);
}
}

function getindexofpoint(point)
{
var index;
for(var i=0;i<routePoints.length;++i)
{
if ((routePoints[i].lat()==point.lat())&&(routePoints[i].lng()==point.lng()))
{
index=i;
}
}
return (index);
}

function CheckPointsForSplit(nopoints)
{
if (nopoints>1)
{
document.getElementById("btn_split").disabled=false;
}
else
{
document.getElementById("btn_split").disabled=true;
}
}

function MakeSplit()
{
messagediv.innerHTML="Click on the first marker";
mode=1;
}

function ClearMap()
{
if (routeMarkers)
{
for (i in routeMarkers)
{
routeMarkers[i].setMap(null);
}
}

//remove polyline
if (!(routePath==undefined))
{
routePath.setMap(null);
}

routePath=null;
routePoints=new Array(0);
routeMarkers=new Array(0);

CheckPointsForSplit(routePoints.length);
mode=0;
messagediv.innerHTML="Map Cleared";
}

Relevant Links

http://www.google.com/apis/maps/

Further Uses and Ideas

  • 24/11/2009 - Fix bug where high zoom causes split to occur on marker #2 rather then the mid-point
  • 15/12/2009 - Fix another split bug

Version History

  • Version 1 (28/09/2008)
    • Version 1.1 (15/12/2009) - You are here
  • Version 2 (10/11/2013) - Implemented Google Maps API V3

Comments For This Page

Ravi, I'm not 100% what you mean, Can you explain in more detail please?
By Daft Logic on 20th June 2016
can we do this with the google suggested shorten path?
By Ravi Kumar on 15th June 2016
Is perfect =D
By Chris on 30th April 2015
Will you make a way to save the path to .KML or something similar?
By J.A. on 20th October 2014
Hi Monika, you will need to use the example above as the basis for changing your customised Google Map API code.
By Daft Logic on 21st September 2014
How can I use that on my existing Google Maps please?
By Monika on 20th September 2014
Good one
On 26th August 2014

Add your own comment below and let others know what you think:

Share This Page

Share this page with others using one of the methods below. Telling others about Daft Logic is good and we appreciate your support!