EDIT This question has been answered but I've clarified it for future readers.
RouteBoxer provides a solution of 'boxing in' a route in Google maps so that I can list various points of interest along that route. This technic though creates borders around each box presented on the map. I've attached an image to describe what it looks like.
The code produced to create RouteBoxer looks like this:
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js"></script>
var directionService = new google.maps.DirectionsService();
var rboxer = new RouteBoxer();
var distance = 20; // km
directionService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
// Box the overview path of the first route
var path = result.routes[0].overview_path;
var boxes = routeBoxer.box(path, distance);
for (var i = 0; i < boxes.length; i++) {
var bounds = box[i];
// Perform search over this bounds
}
}
});
Is it possible to remove the borders surrounding each box on the map?
You have full control. Here is the example above in a fiddle, without black borders -> http://jsfiddle.net/ftgr8dyp/ Look at the function drawBoxes()
:
function drawBoxes(boxes) {
boxpolys = new Array(boxes.length);
for (var i = 0; i < boxes.length; i++) {
boxpolys[i] = new google.maps.Rectangle({
bounds: boxes[i],
fillOpacity: 0,
strokeOpacity: 1.0,
strokeColor: '#000000', //<-- change color
strokeWeight: 0, //<-- change strokeWeight from 1 to 0
map: map
});
}
}
It is standard google.maps.Rectangle
's you can style as you are used to. There is nothing in the RouterBoxer-code that forces certain design or styles.