Головной офис в филиал Google Map с маркером в java-скрипте

Question

Я должен пометить головной офис в филиале с помощью poly-line, код ниже работает только для филиала, не помечается для головного офиса в филиале.

ex: - головной офисможет быть - Дели, филиал - Ченнаи, Мумбаи, Бангалор

мой код работает только для филиала, я хотел бы показать головной офис для каждого филиала, чтобы он был отмечен Poly-line

Кто-нибудь может поделиться хорошей идеей, чтобы решить ...

код: -

$(function () {
         start();
        });

       function start() {
         var markers = [
            {HOLat:13.089562900000,HOLng:80.290230500000,DeLat:12.990928000000, DeLng: 80.242616500000},
           {HOLat:13.089562900000,HOLng:80.290230500000,DeLat:12.991269800000, DeLng: 80.242545000000},
          {HOLat:13.089562900000,HOLng:80.290230500000,DeLat:12.991316800000, DeLng: 80.242520000000}
                         ]
            if (!isEmpty(markers)) {
                var mapOptions = {
                    center: new google.maps.LatLng(markers[0].HOLat, markers[0].HOLng),
                    zoom: 12,
                    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.DeLat, data.DeLng);
                    points.push(new google.maps.LatLng(data.DeLat, data.DeLng));

                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        icon: img,
                        map: map,
                        animation: google.maps.Animation.DROP,
                        title: 'MAP'
                    });

                    marker.addListener('click', toggleBounce);                   

                    (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]) {
                                        infoWindow.setContent(data.DistName);
                                        infoWindow.open(map, marker);
                                    }
                                }
                                else {                                    
                                    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);
            }
      }

, если это решение означает, что очень легко построитьгугл карта

Answer 1

ключ Google от web.config: -

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

карта линий и карта маршрутов: -

<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>

закомментированные строкиработают ли линейные карты этой дорожной карты нормально