/* 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:
4º: En el apartado CSS introducimos lo siguiente:
5º: Y por último en el apartado Java Script introducimos lo siguiente:
Y como resultado obtenemos la posibilidad de mostrar rutas en un mapa dentro de Flexygo: