You must include lib-map.js, google maps js, tsp.js and solver.js on your html.
<!-- LIBMAP LIBRARY -->
<script type="text/javascript"
src="https://system.na1.netsuite.com/c.TSTDRV1215639/suitebundle39858/routing-3/lib-map.js" ></script>
<!-- Dependency Libraries -->
<!-- DO NOT MODIFY THESE FILES! -->
<script type="text/javascript"
src="https://system.na1.netsuite.com/c.TSTDRV1215639/suitebundle39858/routing-3/tsp.js" ></script>
<script type="text/javascript"
src="https://system.na1.netsuite.com/c.TSTDRV1215639/suitebundle39858/routing-3/solver.js" ></script>
<!-- Google Map Libraries -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDs-yHEIicm_0EdS7tPpBS65f090YRtg2U"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Add you KO or AngularJS controller here -->
The library can now be instantiated by the LibMap(element) constructor.
var map = new LibMap(document.getElementById("map"));
Setting center of map.
map.setCenter(lat, lng);
Setting zoom.
map.setZoom(n);
Getting map bounds.
map.getBounds();
Get a map lat-lng position object based from latitude and longitude.
var position = map.getPosition(lat, lng);
Check if coordinates are valid.
var isValid = map.isValidCoordinates(lat, lng);
Get travel mode - returns a google travel mode object. Possible parameter values are "Driving", "Walking" and "Bicycling".
var travelMode = map.getTravelMode("Driving");
Set travel mode - sets the current travel mode.Possible parameters are same as above.
map.setTravel mode("Walking");
A map can have multiple sheets. Sheets contains gmap components that can be rendered by the map.
Creating a sheet.
var sheet = map.addSheet();
Creating a marker and displaying it in the map. This returns the google marker object that was created.
var marker = sheet.createMarker(lat, lng, title, iconUrl);
//Sample usage:
var marker = sheet.createMarker(-33.344, 102.434, "My Marker", "/img/1.png");
Remove a marker from the sheet.
sheet.removeMarker(marker);
Remove all markers from the map.
sheet.removeAllMarkers();
Add a marker click listener.
sheet.addMarkerClickListener(marker, callback);
//Sample Usage:
var marker = sheet.createMarker(-33.344, 102.434, "My Marker", "/img/1.png");
sheet.addMarkerClickListener(marker, function(){
alert("marker was clicked!");
});
Create a polyline by passing an array property object containing lat ang lng values. This returns the google polyline object that was created.
var polyline= map.createPolyline(path);
//Sample usage:
var path = [
{ lat: 123, lng: 12.1 },
{ lat: 12.3, lng: 80.13 },
{ lat: 1.23, lng: 33.12 },
];
var polyline = sheet.createPolyline(path);
Remove a polyline
sheet.removePolyline(polyline);
Remove all polylines
sheeet.removeAllPolylines();
Create a polygon by passing an array property object containing lat ang lng values. This returns the google polygon object that was created.
var polygon = sheet.createPolygon(path);
//Sample usage:
var path = [
{ lat: 123, lng: 12.1 },
{ lat: 12.3, lng: 80.13 },
{ lat: 1.23, lng: 33.12 },
];
var polygon= sheet.createPolygon(path);
Remove a polygon
sheet.removePolygons(polygon);
Remove all polygons
sheet.removeAllPolygons();
Getting directions
map.getDirections(data, callback(response, status) );
// sample usage
var origin = map.getPosition(1.1341, 2.43);
var destination = map.getPosition(13.134, 34.54);
var travelMode = map.getTravelMode("Driving");
var waypoint1 = map.getPosition(13.134, -34.54);
var waypoint2 = map.getPosition(-43.134, -34.54);
var data = {
origin: origin,
destination: destination,
waypoints: [ wapoint1, waypoint2 ],
travelMode: travelMode,
optimizeWaypoints: true,
avoidHighways: false,
avoidTolls: true
}
sheet.getDirections(data, function(response, status){
if (status == google.maps.DirectionsStatus.OK) {
//do something with the response
}else{
//show no results
}
});
property object that contains the following:
- origin (required) Origin of your route. This can be text address or for more accurate result, use google latlng object. use map.getPosition(lat, lng)
- destination (required) Destination of your route. Same format as origin.
- waypoints (optional) array of "stop-overs". Same format as origin and destination.
- travel mode (required) This can be driving, walking, or bycicling google data types. See number 2.
- avoidHighways (optional) boolean
- avoidTolls (optional) boolean
Rendering Directions
map.renderDirections(response);
a google get directions response object
sheet.getDirections(data, function(response, status){
if (status == google.maps.DirectionsStatus.OK) {
map.renderDirections(response);
}else{
//show no results
}
});
Remove directions in the map
sheet.removeDirections();
Initializing the solver
sheet.initTSP();
Adding waypoints
sheet.addWaypoint(lat, lng);
Solving roundtrip
sheet.solveRoundtrip( travelMode, callback(directions, order, duration) );
//Sample Usage:
sheet.addWaypoint(123, 123);
sheet.addWaypoint(124, 124);
sheet.solveRoundtrip(travelMode, function(directions, order, duration){
sheet.renderDirections(directions);
//do something else with order
//do something else with duration
});
Starting over
map.startOver();