{source}
<script src=»http://maps.googleapis.com/maps/api/js?key=AIzaSyD0HUWfODs_qxBvKpYO_iB9fwUkW86DHn8&sensor=true&region=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: {
       &nb
sp;        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
     &nb
sp;  //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];
            &
nbsp;   //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);
        
    &nbs
p;   // 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}