Rutas en un mapa

Publicado más de 5 años hace por Flexygo Team

Publicar un tema

Flexygo Team

El módulo Map de Flexygo nos permite integrar un mapa de Google en Flexygo.

Para ello debemos seguir la configuración que se indica en el foro : Utilización de Google Maps o Google Translate

Pero si ademas del mapa simple de Google queremos añadir rutas entre varias ciudades guardadas en BBDD debemos realizar los siguientes pasos:

1º: Creamos un objeto (Ciudades) con la siguiente estructura de tabla, como mínimo:

Los nombres de las ciudades deben ser guardados siguiendo esta estructura: Nombre, abreviatura ,Ej: Valencia,spn

2º: Creamos un módulo tipo HTML y en el apartado Header introducimos lo siguiente:

<div>
  <flx-dbcombo id="start" ObjectName="ciudades" ViewName="ciudadDefaultList" SQLValueField="nombre" SQLDisplayField="nombre" required ></flx-dbcombo>

  <flx-dbcombo id="end" ObjectName="ciudades" ViewName="ciudadDefaultList" SQLValueField="nombre" SQLDisplayField="nombre" required ></flx-dbcombo>

</div>

ObjectName="NOMBRE OBJETO" ViewName="VIEW DEL OBJETO" SQLValueField="VALOR DEL COMBO" SQLDisplayField="VALOR QUE SE MUESTRA EN EL COMBO"

3º: En el apartado html introducimos lo siguiente:

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions Service</title>
  </head>
  <body>
   <div id="map"></div>
   <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaS*********&callback=initMap">
    </script>
  </body>

4º: En el apartado CSS introducimos lo siguiente:

 /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 50vh;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 50vh;
        margin: 0;
        padding: 0;
      }

5º: Y por último en el apartado Java Script introducimos lo siguiente:

function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 40.416775, lng: -3.703790}
        });
        directionsDisplay.setMap(map);

        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
        
        document.getElementById('start').addEventListener('change', onChangeHandler);
        $('#end').on('change',onChangeHandler);
        
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin: document.getElementById('start').value,
          destination:$('#end').val(),
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }

Y como resultado obtenemos la posibilidad de mostrar rutas en un mapa dentro de Flexygo:

0 Votos

0 Comentarios

Iniciar sesión o Registrarse para publicar un comentario