{source}
<script src=»http://maps.googleapis.com/maps/api/js?key=AIzaSyD0HUWfODs_qxBvKpYO_iB9fwUkW86DHn8&sensor=true®ion=AR»></script>
<script src=»https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places»></script>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js»></script>
<script type=»text/javascript» src=»http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js»></script>
<script type=»text/javascript» src=»http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0″></script>
<script type=»text/javascript»>
var myCenter = new google.maps.LatLng(-34.61667, -58.45000);
var myZoom = 12;
var geocoder;
var map;
var mapProp;
var infowindow = null;
var userLocationMarker = null;
var markers = [];
var layers = [];
var markerCluster;
var dbPOIimport = [];
var dbRestriccionesImport = [];
//Variables para funciones de ruteo
var rendererOptions = {
draggable: true
};
var directionsDisplay;
var directionsService;
var routePath = [];
//var routeBoxer = null;
function initialize() {
var mapProp = {
center : myCenter,
zoom : myZoom,
panControl : true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
zoomControl : true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
mapTypeControl : true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.LEFT_BOTTOM
},
scaleControl : true,
streetViewControl : false,
overviewMapCont
rol : false,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(«MapaRTP-CABA»),mapProp);
//Codigo de inicialización para función de ruteo
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsService = new google.maps.DirectionsService();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(‘indicaciones’));
document.getElementById(‘directionsPanel’).style.display = ‘none’;
google.maps.event.addListener(directionsDisplay, ‘directions_changed’, function() {
computeTotalDistance(directionsDisplay.directions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(‘indicaciones’));
});
//Codigo para grilla de distancia
//routeBoxer = new RouteBoxer();
buscadorControls();
cargarCapaKML();
}
function cargarCapaKML() {
var layer = [];
layer = new google.maps.FusionTablesLayer({
query: {
select: ‘GEOMETRY’,
from: ‘1bDkJ4DpLj2wBuuSMxWyiDT5FLMO52zz9wtlsoAU’
},
styles: [{
polylineOptions: {
strokeColor: ‘#33CCFF’,
strokeOpacity: 0.5,
strokeWeight: 5
}
}],
templateId: 2
});
layer.setMap(map);
layers.push(layer);
google.maps.event.addListener(layer, ‘click’, function(e) {
// Change the content of the InfoWindow
e.infoWindowHtml = «<b>» + e.row[‘TIPO’].value + » » + e.row[‘NOMBRE’].value + «</b><br>» + e.row[‘TRAMO_DV’].value;
});
}
//Funciones para el ruteo
function codeAddress(direccion) {
var address = document.getElementById(direccion).value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { ‘address’: address, ‘region’: ‘ar’}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setZoom(12);
map.setCenter(results[0].geometry.location);
//document.getElementById(direccion).value = results[0].formatted_address;
// Place UserPosition marker
if (userLocationMarker != null)
userLocationMarker.setMap(null);
if (direccion == ‘direccion’) {
var image = {
url: ‘http://maps.google.com/mapfiles/kml/paddle/ylw-stars.png’,
size: new google.maps.Size(64, 64),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(16, 32),
scaledSize: new google.maps.Size(32, 32)
};
userLocationMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: results[0].formatted_address,
icon: image
});
//findClosest(results[0].geometry.location, centrosRuta);
}
} else {
alert(«Lo sentimos, no se pudo resolver la dirección que ingresó.»);
}
});
}
function calcRoute() {
var origen = document.getElementById(«origen»).value;
var destino = document.getElementById(«destino»).value;
var optimizar = false;
var segRoute;
var segLength;
var request;
var hitos = [];
var total = 0;
var i = 0;
while (i < counterHitos) {
i++
hitos.push({
location: document.getElementById(«Hito» + i.toString()).value,
stopover: true
});
}
request = {
origin: origen,
destination: destino,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
//transitOptions: TransitOptions,
//unitSystem: UnitSystem,
waypoints: hitos, //[{location: ‘Bourke, NSW’}, {location: ‘Broken Hill, NSW’}],
optimizeWaypoints: optimizar,
provideRouteAlternatives: true,
//avoidHighways: Boolean,
//avoidTolls: Boolean
region: ‘ar’
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
//segRoute[0] = directionRequest(request);
directionsDisplay.setDirections(result);
routePath = result.routes[0].overview_path;
myroute = result.routes[0];
//for (i = 0; i < myroute.legs.length; i++) {
// total += myroute.legs[i].distance.value;
//}
if (document.getElementById(‘applygrid’).checked == true) {
aplicarGrilla(document.getElementById(‘gridsize’).value);
}
//advertenciaPeaje(dbPOIimport);
} else {
alert(«Lo sentimos, no se pudo calcular una ruta entre los puntos ingresados.»);
}
});
document.getElementById(‘directionsPanel’).style.display = ‘block’;
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000.
}
function aplicarGrilla(distGrilla) {
//var distGrilla = 10; // km
var boxes = routeBoxer.box(routePath, distGrilla);
if (routePath != null && markers.length > 0) {
for (var a = 0; a < markers.length; a++) {
var boundsTest = false;
for (var i = 0; i < boxes.length; i++) {
var bounds = boxes[i];
if (bounds.contains(markers[a].position)) {
boundsTest = true;
}
}
if (boundsTest != true)
markers[a].setMap(null)
}
}
}
// Funciones de control de formularios y formularios dinamicos
var counterHitos = 0;
function buscadorControls() {
var buscadorContainerDiv = document.createElement(‘div’);
buscadorContainerDiv.id = ‘buscadorPanel’;
buscadorContainerDiv.style.cssText = ‘width:350px;padding:5px’;
// Div sombreado para controles
var buscadorControlDiv = document.createElement(‘div’);
buscadorControlDiv.style.cssText = ‘background:rgba(0,51,102,0.75);padding-left:2px;padding-right:2px’;
var controles = document.createElement(‘input’);
controles.type = ‘button’;
controles.id = ‘busqueda’;
controles.value = ‘Buscar Lugar’;
controles.style.cssText = ‘font-family:arial,helvetica,sans-serif;font-size:10pt;width:49.5%’;
controles.onclick = function(){formControls(‘busqueda’);};
buscadorControlDiv.appendChild(controles);
controles = document.createElement(‘input’);
controles.type = ‘button’;
controles.id = ‘ruteo’;
controles.value = ‘Cómo Llegar’;
controles.style.cssText = ‘font-family:arial,helvetica,sans-serif;font-size:10pt;width:49.5%;float:right’;
controles.onclick = function(){formControls(‘ruteo’);};
buscadorControlDiv.appendChild(controles);
// Bottones de control de tipo de busqueda
var outerContainer = document.createElement(‘div’);
outerContainer.id = ‘Buscador’;
buscadorControlDiv.appendChild(outerContainer);
// Inputs de usuario para busqueda de dirección
var container = document.createElement(‘div’);
container.id = ‘busquedaInputs’;
controles = document.createElement(‘input’);
controles.type = ‘text’;
controles.id = ‘direccion’;
controles.style.cssText = ‘font-family:arial,helvetica,sans-serif;font-size:10pt;width:82.5%’;
container.appendChild(controles);
var autocomplete = new google.maps.places.Autocomplete((controles), { types: [‘geocode’] });
controles = document.createElement(‘input’);
controles.type = ‘button’;
controles.id = ‘buscar’;
controles.value = ‘Buscar’;
controles.onclick = function(){codeAddress(‘direccion’);};
controles.style.cssText = ‘font-family:arial,helvetica,sans-serif;font-size:10pt;width:15%;float:right’;
container.appendChild(controles);
container.style.display = ‘none’;
outerContainer.appendChild(container);
// Inputs de usuario para busqueda de dirección
container = document.createElement(‘div’);
container.id = ‘ruteoInputs’;
controles = document.createElement(‘input’);
controles.type = ‘text’;
controles.id = ‘origen’;
controles.placeholder = ‘Origen : Introduce una ubicación’;
controles.style.cssText = ‘font-family:arial,helvetica,sans-serif;font-size:10pt;width:82.5%’;
container.appendChild(controles);
var autocomplete = new google.maps.places.Autocomplete((controles), { types: [‘geocode’] });
controles = document.createElement(‘input’);
controles.type = ‘button’;
controles.id = ‘AddHito0’;
controles.value = ‘+’;
controles.style.cssText = ‘font-family:arial,helvetica,sans-serif;font-size:10pt;width:7.5%;float:right’;
controles.onclick = function(){addHito();};
container.appendChild(controles);
controles = document.createElement(‘span’);
controles.id = ‘Hitos’;
container.appendChild(controles);
controles = document.createElement(‘input’);
controles.type = ‘text’;
controles.id = ‘destino’;
controles.placeholder = ‘Destino : Introduce una ubicación’;
controles.style.cssText = ‘font-family:arial,helvetica,sans-serif;font-size:10pt;width:82.5%’;
container.appendChild(controles);
autocomplete = new google.maps.places.Autocomplete((controles), { types: [‘geocode’] });
controles = document.createElement(‘input’);
controles.type = ‘button’;
controles.id = ‘rutear’;
controles.value = ‘Obtener Indicaciones’;
controles.onclick = function(){calcRoute();};
controles.style.cssText = ‘font-family:arial,helvetica,sans-serif;font-size:10pt;width:100%’;
container.appendChild(controles);
container.style.display = ‘none’;
outerContainer.appendChild(container);
buscadorContainerDiv.appendChild(buscadorControlDiv);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(buscadorContainerDiv);
google.maps.event.addDomListener(buscadorContainerDiv, ‘mouseover’, function() {
document.getElementById(‘Buscador’).style.display = ‘block’;
});
google.maps.event.addDomListener(buscadorContainerDiv, ‘mouseout’, function() {
if (event.clientX < 0 || event.clientX > 350)
document.getElementById(‘Buscador’).style.display = ‘none’;
});
//google.maps.event.addDomListener(document.getElementById(‘applygrid’), ‘onclick’, function() {
//
//});
}
function formControls(tipoBusqueda) {
if (tipoBusqueda == ‘busqueda’) {
document.getElementById(‘ruteoInputs’).style.display = ‘none’;
document.getElementById(‘ruteo’).style.cssText = ‘font-weight: 100;font-family:arial,helvetica,sans-serif;font-size:10pt;width:49.5%;float:right’;
document.getElementById(‘busquedaInputs’).style.display = ‘block’;
document.getElementById(‘busqueda’).style.cssText = ‘font-weight: 900;font-family:arial,helvetica,sans-serif;font-size:10pt;width:49.5%’;
} else if (tipoBusqueda == ‘ruteo’) {
document.getElementById(‘ruteoInputs’).style.display = ‘block’;
document.getElementById(‘ruteo’).style.cssText = ‘font-weight: 900;font-family:arial,helvetica,sans-serif;font-size:10pt;width:49.5%;float:right’;
document.getElementById(‘busquedaInputs’).style.display = ‘none’;
document.getElementById(‘busqueda’).style.cssText = ‘font-weight: 100;font-family:arial,helvetica,sans-serif;font-size:10pt;width:49.5%’;
}
}
function opcionesControls() {
if (document.getElementById(‘mostrarOpciones’).value == ‘Mostrar Opciones de Busqueda’) {
document.getElementById(‘mostrarOpciones’).value = ‘Ocultar Opciones de Busqueda’;
document.getElementById(‘OpcionesRuteo’).style.display = ‘block’;
} else {
document.getElementById(‘mostrarOpciones’).value = ‘Mostrar Opciones de Busqueda’;
document.getElementById(‘OpcionesRuteo’).style.display = ‘none’;
}
}
function addHito() {
if (counterHitos < 8) {
document.getElementById(«AddHito» + counterHitos.toString()).style.display = ‘none’;
if (counterHitos > 0)
document.getElementById(«RemoveHito» + counterHitos.toString()).style.display = ‘none’;
counterHitos = counterHitos + 1;
var controles = document.createElement(‘input’);
controles.type = ‘text’;
controles.id = ‘Hito’ + counterHitos;
controles.placeholder = ‘Parada ‘ + counterHitos + ‘ : Introduce una ubicación’;
controles.style.cssText = ‘width:82.5%’;
document.getElementById(‘Hitos’).appendChild(controles);
autocomplete = new google.maps.places.Autocomplete((controles), { types: [‘geocode’] });
controles = document.createElement(‘input’);
controles.type = ‘button’;
controles.id = ‘RemoveHito’ + counterHitos;
controles.value = ‘-‘;
controles.style.cssText = ‘width:7.5%;float:right’;
controles.onclick = function(){removeHito();};
document.getElementById(‘Hitos’).appendChild(controles);
controles = document.createElement(‘input’);
controles.type = ‘button’;
controles.id = ‘AddHito’ + counterHitos;
controles.value = ‘+’;
controles.style.cssText = ‘width:7.5%;float:right’;
controles.onclick = function(){addHito();};
document.getElementById(‘Hitos’).appendChild(controles);
} else {
alert(«Se llegó a la cantidad máxima de hitos permitods por el buscador.»);
}
}
function removeHito() {
if (counterHitos != 0) {
document.getElementById(‘Hitos’).removeChild(document.getElementById(‘Hito’ + counterHitos));
document.getElementById(‘Hitos’).removeChild(document.getElementById(‘AddHito’ + counterHitos));
document.getElementById(‘Hitos’).removeChild(document.getElementById(‘RemoveHito’ + counterHitos));
counterHitos = counterHitos – 1;
document.getElementById(«AddHito» + counterHitos.toString()).style.display = ‘inline’;
document.getElementById(«RemoveHito» + counterHitos.toString()).style.display = ‘inline’;
}
}
function showHelpBuscador() {
if (document.getElementById(«HelpBuscador»).style.display == ‘none’) {
document.getElementById(«HelpBuscador»).style.display = ‘block’;
} else {
document.getElementById(«HelpBuscador»).style.display = ‘none’;
}
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
{/source}
Deja tu comentario