Is it possible with Google Maps API to highlight streets?
The only thing i could find that was close to this effect was drawing lines over them.
But this is a lot of work and more inaccurate. The lines will also go over place names.
What i want is to highlight certain streetnames as if you were navigating from point a to b.
So for example if 10 streets are closed by streetworkers i can highlight those streets.
Is it possible with Google Maps API to highlight streets?
The only thing i could find that was close to this effect was drawing lines over them.
But this is a lot of work and more inaccurate. The lines will also go over place names.
What i want is to highlight certain streetnames as if you were navigating from point a to b.
So for example if 10 streets are closed by streetworkers i can highlight those streets.
- 1 stackoverflow.com/questions/2155032/… ` ` Take a look there and especially this link econym.org.uk/gmap/example_snappath.htm – Moritz Roessler Commented Nov 9, 2012 at 15:34
- 1 Those examples are Google Maps API v2, the same concept applies to v3, but they are drawing lines over streets, which the OP does not want to do. – geocodezip Commented Nov 9, 2012 at 16:16
- Oh sorry didn't know i could accept answers. But lets keep it on topic. Anyone knows a solution? I can imagine people had this problem before. But maybe its just not possible. – user1081577 Commented Nov 12, 2012 at 15:38
1 Answer
Reset to default 15This can actually be done quite easily by using the Maps API directions renderer.
You have to provide the lat/long coordinates of the starting and ending point of your street, and the renderer does all the calculation and painting for you. You do NOT need to read in the direction steps and draw the polyline yourself!
See it in action here:
http://jsfiddle.net/HG7SV/15/
This is the code, all magic is done in function initialize():
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
// init map
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// init directions service
var dirService = new google.maps.DirectionsService();
var dirRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true});
dirRenderer.setMap(map);
// highlight a street
var request = {
origin: "48.1252,11.5407",
destination: "48.13376,11.5535",
travelMode: google.maps.TravelMode.DRIVING
};
dirService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
dirRenderer.setDirections(result);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
If your street is curved and the renderer should find a shortcut that you did not intend, this can easily be amended by adding intermediate waypoints to force the drawn line exactly to your desired street:
var request = {
origin: "48.1252,11.5407",
destination: "48.13376,11.5535",
waypoints: [{location:"48.12449,11.5536"}, {location:"48.12515,11.5569"}],
travelMode: google.maps.TravelMode.DRIVING
};