set-line-and-directions-on-map

set-line-and-directions-on-map

by santosh_patnala

HTML

<div id="map-canvas" style="height: 500px; width: 100%; float: left" onclick="calcRoute();"></div>
            <div class="textAlign" style="margin-top: 20px; margin-bottom: 20px;">
                <a class="btn btn-info" href="#" id="create" onclick="createPolygon();">Create Polygon</a>
                <a class="btn btn-info" href="#" id="remove" onclick="removePolygon();">Remove Polygon</a>
                <a class="btn btn-info" href="#" id="clear" onclick="clearOverlays();">Clear Markers</a>
            </div>

JavaScript

var map;
        var coords = [];
        var markers = [];
        var rightShoulderFront;
        var lats = [];
        var lngs = [];
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();

        // window.onload = loadScript;

        //function loadScript() {
        //    var script = document.createElement("script");
        //    script.type = "text/javascript";
        //    script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDhHvIupm5fBz9iZFOxA_ghTZLiCmzsrjc&sensor=true&callback=initialize";
        //    document.body.appendChild(script);
        //}

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var mapOptions = {
                zoom: 6,
                center: new google.maps.LatLng(17.397821, 78.479354),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            directionsDisplay.setMap(map);

            radioSelected();
        }

        function calcRoute() {
            var start;// = document.getElementById('start').value;
            start = coords[0];
            var end;// = document.getElementById('end').value;
            end = coords[1];
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                } clearOverlays();
            });

        }
        google.maps.event.addDomListener(window, 'load', initialize);
        function radioSelected() {
            //to remove polygon from google.maps
            if (rightShoulderFront !== undefined)
               ...