11

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.

Brad
  • 159,648
  • 54
  • 349
  • 530
user1081577
  • 469
  • 2
  • 8
  • 25
  • 1
    http://stackoverflow.com/questions/2155032/highlighting-whole-street-with-some-maps-api ` ` Take a look there and especially this link http://econym.org.uk/gmap/example_snappath.htm – Moritz Roessler Nov 09 '12 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 Nov 09 '12 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 Nov 12 '12 at 15:38

1 Answers1

15

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
                };
Jpsy
  • 20,077
  • 7
  • 118
  • 115
  • Thx for your answere! Is it also possible to draw multiple routes like this? If i draw a second route in your jsFiddle the first route will disappear. – user1081577 Nov 15 '12 at 11:48
  • Oke i found out i have to add a new directionService object for each path i draw. Is this adviceable? [Link to a new fiddle.](http://jsfiddle.net/FX2ag/) (some copy paste work probably better off making a loop) – user1081577 Nov 15 '12 at 12:09
  • [More information about multiple routes and coloring](http://stackoverflow.com/questions/8304875/using-google-maps-3-api-to-get-multiple-routes-on-a-map) – user1081577 Nov 15 '12 at 12:19
  • Is it also possible to use specific streetnames? That Google Maps gives you the begin and end Lat/Lng of the street. – user1081577 Nov 15 '12 at 12:30
  • 1
    Yes, you can use written addresses instead of lat/long coordinates. Please read the examples at https://developers.google.com/maps/documentation/directions/ (especially the section "Request Parameters"). I would be happy if you would accept my answer. I have worked for you. – Jpsy Nov 15 '12 at 15:23