come utilizzare l'API di google maps con greasemonkey per leggere una tabella di indirizzi e tracciare il percorso?

Question

C'è un sito web che contiene gli itinerari degli autobus per la mia città (Porto Alegre - Brasile) in una tabella.

es: EPTC

Utilizzando Greasemonkey per caricare de Google Maps API, id come mostrare una mappa fissa nell'angolo superiore destro della screeen.

Lo script deve leggere i nomi delle strade dalla tabella, eliminare gli spazi extra (ce ne sono molti) e tracciare il percorso nell'ordine corretto.

Answer 1

Ecco lo script Greasemonkey compatibile per realizzare il compito: http://userscripts.org/scripts/show/116339

Punti chiave:

1- trovare la tabella e ciclo attraverso ogni cella per ottenere il contenuto
2- elimina tutti gli spazi bianchi extra e salva il testo in un array
3- crea due DIV, uno all'interno dell'altro (altrimenti la posizione non verrà riparata)
4- Aggiungere il div alla pagina e chiamare l'API
5- "Google" deve essere richiamato con unsafeWindow (google = unsafeWindow.google)

API_js_callback = "http://maps.google.com/maps/api/js?sensor=false&region=BR&callback=initialize"; 

var script = document.createElement('script'); 
    script.src = API_js_callback; 
    var head = document.getElementsByTagName("head")[0]; 
    (head || document.body).appendChild(script); 

if (document.getElementsByTagName('TABLE')[0] != null) { 
    var Tabela_1 = document.getElementsByTagName('TABLE')[0]; 
    var Tabela_1_cel = Tabela_1.getElementsByTagName('TD'); 
    var Tabela_1_lin = Tabela_1.getElementsByTagName('TR'); 
} 

if (document.getElementsByTagName('TABLE')[1] != null) { 
    var Tabela_2 = document.getElementsByTagName('TABLE')[1]; 
    var Tabela_2_cel = Tabela_2.getElementsByTagName('TD'); 
    var Tabela_2_lin = Tabela_2.getElementsByTagName('TR'); 
} 

var DIVmapa = document.createElement('div'); 
    DIVmapa.id = 'DIVmapa'; 
    DIVmapa.style.border = '2px coral solid'; 
    DIVmapa.style.cursor = 'pointer'; 
    DIVmapa.style.display = ''; 
    DIVmapa.style.height = '75%'; 
    DIVmapa.style.margin = '1'; 
    DIVmapa.style.position = 'fixed'; 
    DIVmapa.style.padding = '1'; 
    DIVmapa.style.right = '1%'; 
    DIVmapa.style.top = '1%'; 
    DIVmapa.style.width = '30%'; 
    DIVmapa.style.zIndex = '99'; 

var DIVinterna = document.createElement('div'); 
    DIVinterna.id = 'DIVinterna'; 
    DIVinterna.style.height = '100%'; 
    DIVinterna.style.width = '100%'; 
    DIVinterna.style.zIndex = '999'; 

if (Tabela_1 || Tabela_2) { 
    document.body.appendChild(DIVmapa); 
    DIVmapa.appendChild(DIVinterna); 
} 

initialize = setTimeout(function() { 
    google = unsafeWindow.google; 
    directionsService = new google.maps.DirectionsService(); 
    directionsDisplay = new google.maps.DirectionsRenderer(); 

    var PortoAlegre = new google.maps.LatLng(-30.034176,-51.229212); 
    var myOptions = { 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: PortoAlegre 
    } 

    map = new google.maps.Map(document.getElementById("DIVinterna"), myOptions); 
    directionsDisplay.setMap(map); 

    function calcRoute() { 
     var start = Tabela_1_cel[1].getElementsByTagName('B')[0].innerHTML.replace(/\s{2,}/g, ' ') + ' Porto Alegre'; 
     var end = Tabela_1_cel[10].getElementsByTagName('B')[0].innerHTML.replace(/\s{2,}/g, ' ') + ' Porto Alegre'; 
     var waypts = []; 
     //for (var i=1; i<Tabela_1_cel.length; i++) { 
     for (var i=2; i<10; i++) { 
      ponto_1 = Tabela_1_cel[i].getElementsByTagName('B')[0].innerHTML; 
      semespacos_1 = ponto_1.replace(/\s{2,}/g, ' ') + ' Porto Alegre'; 
      waypts.push({location: semespacos_1, stopover: true}); 
     } 

     var request = { 
      origin: start, 
      destination: end, 
      waypoints: waypts, 
      optimizeWaypoints: false, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 

     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) {directionsDisplay.setDirections(response)}; 
      //alert(status); 
     }); 
    } 

    calcRoute(); 
}, 1000); 

Enjoy! :)