Menu
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.
664
Use the Draw a Line tool (under the search bar, looks a bit like a share-icon), to draw either just a line, or a driving, walking or biking route. Note that your map can have one or more lines in it. Finish off each line by double-clicking on the final point.
You can trace a path or highlight an area on your map by drawing lines and shapes.
Click on the option labeled Tools and then click on Change map. Once there, click on the button labeled Change feature styles. There are plenty of options for changing the different styles of your markers, which includes changing their color.
Create a map with the Google Maps API.Google Maps Platform gives you the ability to create a truly custom map that works exactly how you want it to.
This 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
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
