Make a polylinea with jquery gmaps

0

I try to make a polylinea, with jquery gmaps , I have the function but it does not draw:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MostrarUbicaciones.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
    <link href="css/jquery.gmaps.css" rel="stylesheet" />
    <script src="js/jquery.gmaps.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <style>
        .gmaps {
        height:600px;
        width: 200%;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
            <div data-key="AIzaSyDwNBXmHBDQ29JWsRH8gwNVkf7mM0-flaI"
                data-control-zoom="true"
                 data-control-type="true"
                 data-control-scale="true"
                 data-control-streetview="true"
                 data-control-rotate="true"
                  data-control-mousewheel="true"              

                data-zoom="14" role="map" class="gmaps">
                 <!-- items de ubicaciones -->

                <asp:Repeater ID ="Repeater1" runat="server">
                    <ItemTemplate>


 <div           
                data-id="<%# DataBinder.Eval(Container.DataItem,"ID") %>"
                data-lat="<%# DataBinder.Eval(Container.DataItem,"Latitud") %>"
                data-lng="<%# DataBinder.Eval(Container.DataItem,"Longitud") %>"
                    data-marker-width="35"
                    data-marker-height="43"
                   class="marker">

                        <div class="map-card">
                <h1>"<%# DataBinder.Eval(Container.DataItem,"Ubicacion") %>"</h1>
                <p>"<%# DataBinder.Eval(Container.DataItem,"ID") %> - <%# DataBinder.Eval(Container.DataItem,"Ubicacion") %>"</p>
                 <img src="http://insupyavirac.blogspot.com/2018/02/instituto-tecnologico-superior-de.html" />
                    </div>  


    </div>

                        </ItemTemplate>
                    </asp:Repeater>


            </div>


    </form>
    <script>
        $(document).ready(function () {
            $('.gmaps').gmaps();
        });
    </script>

 <script>
   var flightPlanCoordinates = [Latitud,Longitud];

      // Información de la ruta (coordenadas, color de línea, etc...)
      var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });

     // Creando la ruta en el mapa
     flightPath.setMap(gmaps);

</script>
    <input type="button" value="Regresar" onclick="window.open('http://localhost:8266/frmUbicaciones.aspx')" />
</body>
</html>
    
asked by Alex Calispa 09.08.2018 в 22:11
source

1 answer

0

The problem is that the path parameter must be composed of at least two points (necessary to form a line):

var flightPlanCoordinates = [
    new google.maps.LatLng(Latitud1, Longitud1), 
    new google.maps.LatLng(Latitud2, Longitud2)
];
    
answered by 13.08.2018 в 14:06