/* 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:
Javier Dart
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:
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: