Skip to content Skip to sidebar Skip to footer
Home / Google Maps / Google Maps Api 3 / Javascript

Google Maps Api, Is It Possible To Highlight Specific Streets?

Post a Comment
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

Solution 1:

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><styletype="text/css">html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            #map_canvas { height: 100% }
        </style><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script><scripttype="text/javascript">functioninitialize() {
                // init mapvar myOptions = {
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                // init directions servicevar dirService = new google.maps.DirectionsService();
                var dirRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true});
                dirRenderer.setMap(map);

                // highlight a streetvar 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><bodyonload="initialize()"><divid="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
                };

Post a Comment for "Google Maps Api, Is It Possible To Highlight Specific Streets?"