От головного офиса до филиала Google Map с маркером в java-скрипте

google key from web.config:-

<script type = "text/javascript" src = "http://maps.googleapis.com/maps/api/js?key=<%=ConfigurationManager.AppSettings["GoogleAPIKey"] %>"></script>

line map & Route Map:-

<script type = "text/javascript">
        //code by Ethiraj.G on 15.12.2018, ver = 1.01
        $(function () {
            start();
        });

        function getUrlVars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for (var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        function isEmpty(str) {
            return typeof str == 'string' && !str.trim() || typeof str == 'undefined' || str === null || str == 0;
        }

        $(function () {
            var h = $(window).height();
            h = h - 100;
            w = $(window).width();
        });       

        /*
        function start() {
            var UserID = getUrlVars()['ID'];
            var paramstr = '';
            paramstr += "@EmpID$" + UserID;
            paramstr += "~@Date$" + '<%= Session["Date"] %>';
            paramstr += "~@UserID$" + '<%= Session["UserTypeID"] %>';
            paramstr += "~@UserTypeID$" + '<%= Session["UserTypeID"] %>';
            paramstr += "~@Type$" + 'V';

            var markers = GetRowData_Tables("DBSP_Rpt_MDOSub_ActivityPlan", paramstr, "Sample.aspx/GetRowData_Tables");

            if (!isEmpty(markers)) {
                var mapOptions = {
                    center: new google.maps.LatLng(markers[0].Lat, markers[0].Lon),
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var infoWindow = new google.maps.InfoWindow();
                var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

                var start = '';
                var points = [];
                for (i = 0; i < markers.length; i++) {
                img = "icons/" + (i+1) + ".png";
                var data = markers[i];
                myLatlng = new google.maps.LatLng(data.Lat, data.Lon);
                points.push(new google.maps.LatLng(data.Lat, data.Lon));
                var marker = new google.maps.Marker({ position: myLatlng, icon: img, map: map, title: 'MAP' });

                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        var latlng = { lat: parseFloat(marker.position.lat()), lng: parseFloat(marker.position.lng()) };
                        var geocoder = new google.maps.Geocoder;
                        geocoder.geocode({ 'location': latlng }, function (results, status) {
                            if (status === 'OK') {
                                if (results[1]) {
                                    var dist = '';
                                    //infoWindow.setContent('<b> Names :</b> ' + data.Names + '<br /><b> Emp Name :</b> ' + data.EmpName + '<br /><b> StartTime :</b> ' + data.StartTime + '<br /><b> End Time :</b> ' + data.EndTime + '<br /><b> StartDate :</b> ' + data.StartDate + '<br /><b> Location :</b> ' + results[1].formatted_address + '<br /><b> Dist Name :</b> ' + data.DistName + '<br />');
                                    infoWindow.setContent( data.DistName );
                                    infoWindow.open(map, marker);
                                }
                            }
                            else {
                                //infoWindow.setContent('<b> Names :</b> ' + data.Names + '<br /><b> Emp Name :</b> ' + data.EmpName + '<br /><b> StartTime :</b> ' + data.StartTime + '<br /><b> End Time :</b> ' + data.EndTime + '<br /><b> StartDate :</b> ' + data.StartDate + '<br /><b> Location :</b> ' + results[1].formatted_address + '<br /><b> Dist Name :</b> ' + data.DistName + '<br />');
                                infoWindow.setContent( data.DistName );
                                infoWindow.open(map, marker);
                            }
                        });
                    });
                })(marker, data);
            }

            var polyOptions = { path: points, strokeColor: "#FF0000", strokeOpacity: 1, strokeWeight: 3 }
            var it = new google.maps.Polyline(polyOptions);
            it.setMap(map);
        }
      }      
      */

      function start() {
            var UserID = getUrlVars()['ID'];
            var paramstr = '';
            paramstr += "@EmpID$" + UserID;
            paramstr += "~@Date$" + '<%= Session["Date"] %>';
            paramstr += "~@UserID$" + '<%= Session["UserTypeID"] %>';
            paramstr += "~@UserTypeID$" + '<%= Session["UserTypeID"] %>';
            paramstr += "~@Type$" + 'V';

            //debugger
            var markers = GetRowData_Tables("DBSP_Rpt_MDOSub_ActivityPlan", paramstr, "Sample.aspx/GetRowData_Tables");
            if (!isEmpty(markers)) {
                var directionsService = new google.maps.DirectionsService;
                map = new google.maps.Map(document.getElementById("map_canvas"), { center: new google.maps.LatLng(markers[0].HOLat, markers[0].HOLng), 
                zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP });

               var start1 = [], end1 = []; var img = '';
               for (i = 0; i < markers.length; i++) 
               {
                    var data = markers[i];
                    var img= 'icons/' + (i+1) + ".png";

                    start1 = new google.maps.LatLng(markers[0].HOLat, markers[0].HOLng);
                    end1 = new google.maps.LatLng(data.Lat, data.Lon);

                    var directionsDisplay = new google.maps.DirectionsRenderer({ map: map, polylineOptions: { strokeColor: '#03a5ef' }, 
                    strokeOpacity: 5.0, strokeWeight: 50, suppressMarkers: true  });
                    DisplayRoute(directionsService, directionsDisplay, start1, end1, map, data, img);
              }
           }
      }

      function DisplayRoute(directionsService, directionsDisplay, start1, end1, map, data, img) {
            directionsService.route({ origin: start1, destination: end1, travelMode: 'DRIVING', optimizeWaypoints : true
            }, function (response, status) {
                if (status === 'OK') {
                    directionsDisplay.setDirections(response);
                    var legs = response.routes[0].legs;
                    for (i=0;i<legs.length;i++) {
                        if (i == 0)
                        {
                            var img1 = "icons/" + "0.png";
                            var cs = '<div>' +data.Discription+'</div>';
                            createMarkerfarmer(legs[i].start_location, cs, img1);
                        }

                        var cs = '<div>' + data.DistName + '<br/><b> Distance: '+ response.routes[0].legs[0].distance.text +'</b></div>';
                        createMarkerfarmer(legs[i].end_location, cs, img);
                    }
                }
            });
        }


        function createMarkerfarmer(latlng, contentString, marker_icon) {
            var marker = new google.maps.Marker({
                position: latlng, map: map,
                animation: google.maps.Animation.DROP,
                icon: marker_icon, strokeColor: '#FF0000',
                strokeOpacity: 0.8, strokeWeight: 1, fillOpacity: 0.8, clickable: true
            });

            var infoWindow = new google.maps.InfoWindow({
                content: contentString
            });

            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.open(map, marker);
            });
        }

        function Map_Date(date) {
            var newDate = '';
            if (date.length > 0) {
                date = date.split('/');
                newDate = date[2] + '/' + date[1] + '/' + date[0];
            }
            return newDate;
        }

        function GetRowData_Tables(procName, paramstr, url) {
            var rowData;
            $.ajax({
                url: url,
                type: "POST",
                dataType: "json",
                async: false,
                data: "{procedureName: '" + procName + "',paramstr: '" + paramstr + "'}",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    if (!isEmpty(data.d))
                        rowData = $.parseJSON(data.d);
                    else
                        rowData = '[]';
                },
                error: function (error) { }
            });
            return rowData;
        }
        //code by Ethiraj.G on 15.12.2018, ver = 1.01
    </script>

прокомментированные строки - это линейная карта, остальная часть этой дорожной карты работает нормально