Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12
  1. #1
    Utente di HTML.it L'avatar di Mon91
    Registrato dal
    Jul 2013
    Messaggi
    52

    API Google Maps - non visualizza i markers!

    Salve ragazzi!
    Sto aiutando un mio amico a completare il suo sito web per impratichirmi e avendo affrontato una problematica simile (PROBLEMA collegamento tra jsp e database) non molto tempo fa mi chiedevo se poteste darmi ancora una mano.
    Il punto è creare una mappa che mostri dei markers su di essa, segnaposto di indirizzi che mi interessano.

    Rispetto al mio questo problema è più semplice, ma non riesco a risolverlo: il sito infatti visualizza correttamente la mappa di gmaps, ma non carica gli indirizzi e di conseguenza non crea i Markers.
    Tra il leggere gli indirizzi e creare i Markers c'è un passaggio intermedio, quello di fare il geocoding degli indirizzi cioè passare da indirizzo in forma "umana" a indirizzo come lat e lon.
    Aprendo la console web (con Tomcat acceso) e cliccando su js dice:
    [11:27:35.455] ReferenceError: fx is not defined @ http://localhost:8080/Prova22/gmap.html:23

    Alla riga 23 si trova la chiamata alla funzione fx();
    codice:
    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map-canvas { height: 100% }
        </style>
        <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=MIA_CHIAVE_GMAPS&sensor=false">
        </script>
        <script type="text/javascript">
          function initialize() {
            var geocoder = new google.maps.Geocoder();
            var mapOptions = {
              center: new google.maps.LatLng(44.647,10.925),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
            fx();
          }
         function codeAddress() {
        var address = document.getElementById("address").value;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
             position: posizione,
             map: map,
             title:titolo  
             });    
            return marker;
           } else {
            alert("Geocode was not successful for the following reason: " + status);
          }
        });
      }
       google.maps.event.addDomListener(window, 'load', initialize);
       </script>
      </head>
      <body onload="initialize()"></body>
    </html>
    Gli indirizzi glieli passo attraverso questa pagina html:
    codice:
    <html>
      <head>
         <meta name="viewport" content="initial-scale=1.0,  user-scalable=no" />
        <style type="text/css">
          #map-canvas { height: 500px; 
                        width: 600px;
                      }
                    
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="gmap.html"></script>
        <script type="text/javascript">
        function fx() {
                codeAddress("Via amendola 2,Reggio Emilia","ygugygiyg","059303942");
            
              }
        </script>
     </head>
      <body>
      
        <h1 onclick="addP()">Maps</h1>
        <div id="map-canvas"/>
      </body>
    </html>
    Questa pagina deve la sua esistenza al fatto che verrà sostituito dentro la funzione fx() qualcosa di più dinamico (legato ad un bean dal quale si fa una query su un database di indirizzi che mi interessano) tipo:
    codice:
    fx(){
    <%=x.getElements()%>
    }
    MA QUESTA E' UN'ALTRA STORIA...(e qui lo aiuto io!)

    Nel momento in cui la mappa visualizzerà un marker, proverò ad aggiungere diversi codeAddress() e in caso di funzionamento corretto faremo diventare tutto dinamico.

    Ora: è solo una questione di collegare, fare vedere le due pagine fra di loro? come devo fare?
    Ultima modifica di Mon91; 09-10-2013 a 12:10 Motivo: edito per togliere la mia chiave di gmaps!

  2. #2
    Utente di HTML.it
    Registrato dal
    Aug 2002
    Messaggi
    8,013
    Ciao di nuovo Premesso che si tratta di javascript fino a questo punto, manca comunque l'intera implementazione di codeAddress.
    Altra cosa, se vuoi crearti una tua "libreria", con le funzioni scritte di tuo pugno, quali codeAddress o fx, non conviene che le metti in un file .js separato e le richiami con
    codice:
    <script type="text/javascript" src="tuoFile.js"></script>
    ?
    Oppure mi sto perdendo qualcosa? Comunque come detto prima, al momento si tratta di javascript e non di java, quindi dovresti segnalare il thread ad un moderatore in modo che possa spostarlo nella sezione apposita
    <´¯)(¯`¤._)(¯`»ANDREA«´¯)(_.¤´¯)(¯`>
    "The answer to your question is: welcome to tomorrow"

  3. #3
    Utente di HTML.it L'avatar di Mon91
    Registrato dal
    Jul 2013
    Messaggi
    52
    Quote Originariamente inviata da Andrea1979 Visualizza il messaggio
    Ciao di nuovo Premesso che si tratta di javascript fino a questo punto, manca comunque l'intera implementazione di codeAddress.
    Altra cosa, se vuoi crearti una tua "libreria", con le funzioni scritte di tuo pugno, quali codeAddress o fx, non conviene che le metti in un file .js separato e le richiami con
    codice:
    <script type="text/javascript" src="tuoFile.js"></script>
    ?
    Oppure mi sto perdendo qualcosa? Comunque come detto prima, al momento si tratta di javascript e non di java, quindi dovresti segnalare il thread ad un moderatore in modo che possa spostarlo nella sezione apposita
    (HO CONTATTATO IL MODERATORE. IN ATTESA CHE LA SPOSTI IN JS)

    Certamente uno dei prossimi passaggi, come dici tu Andrea, sarà quello di spostare le funzioni a parte in una pagina.js, richiamandoli poi come hai scritto tu. Ora però volevo capire bene che cosa sbaglio nello statico e perchè la fx() con la sua chiamata a codeAddress() non passa correttamente i valori all'altra pagina che quindi non stampa niente. La codeAddress() cosa deve ricevere in ingresso? Cavolo continuo a leggerla e rileggerla non capisco perchè non geocoda e restituisce un marker!?
    Ho provato a spezzare le funzioni in una che geocoda e una che fa i marker ma non capisco come gestirmi i parametri e come passare valori tra una funzione e l'altra!

  4. #4
    Moderatore di Programmazione L'avatar di LeleFT
    Registrato dal
    Jun 2003
    Messaggi
    17,328

    Moderazione

    Quote Originariamente inviata da Mon91 Visualizza il messaggio
    (HO CONTATTATO IL MODERATORE. IN ATTESA CHE LA SPOSTI IN JS)
    Non so se hai contattato direttamente qualcuno fra alka e MItaly... a me non è arrivato nulla (né come segnalazione standard, né come PVT).

    Sposto la discussione.


    Ciao.
    "Perchè spendere anche solo 5 dollari per un S.O., quando posso averne uno gratis e spendere quei 5 dollari per 5 bottiglie di birra?" [Jon "maddog" Hall]
    Fatti non foste a viver come bruti, ma per seguir virtute e canoscenza

  5. #5
    Utente di HTML.it
    Registrato dal
    Aug 2002
    Messaggi
    8,013
    Se non ricordo male, scrivemmo una codeAddress per l'altra tua applicazione (quella con JSP e JavaBean). Lì decidemmo di passare un po' più di informazioni:
    codice:
    function codeAddress(address, info, tel) {
                //var address = document.getElementById('address').value;            
                geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {                
                    addMarker(results, address, info, tel);                    
                }            
                else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
              });
          }
    il fatto è che comunque (e lo dimostra parzialmente la riga commentata), visto che non ne sapevo niente, sono partito dalla documentazione

    https://developers.google.com/maps/d...ript/geocoding

    se scrolli fino a verso metà trovi un minimo di codice, con l'implementazione di codeAddress che riceve (o megli, pesca) da un textfield l'indirizzo in cui andare a piazzare il marker.

    Ora, quello che dovrebbe fare il tuo amico o che dovresti fare tu è:
    - decidere come organizzare il lavoro (volete separare le funzioni base - inizializzazione della mappa, codeAddress o come la vorrete chiamare etc) dal resto? Bene. File dedicato. Volete separare la lista degli indirizzi da cercare e di cui mettere un marker? Bene. File dedicato. Potete anche mettere in un file dedicato la funzione fx. Però bisogna che vi chiariate le idee e che guardiate la documentazione. Riadattare codice va bene, benissimo, però bisogna sapere su cosa si sta mettendo le mani, altrimenti si finisce come l'altra volta...

    A questo punto nella pagina "principale" non vi resterà che chiamare i vari file da includere (tag script) e definire lo spazio in cui andare a mostrare la mappa.
    <´¯)(¯`¤._)(¯`»ANDREA«´¯)(_.¤´¯)(¯`>
    "The answer to your question is: welcome to tomorrow"

  6. #6
    Utente di HTML.it L'avatar di Mon91
    Registrato dal
    Jul 2013
    Messaggi
    52
    Quote Originariamente inviata da Andrea1979 Visualizza il messaggio
    Se non ricordo male, scrivemmo una codeAddress per l'altra tua applicazione (quella con JSP e JavaBean). Lì decidemmo di passare un po' più di informazioni:
    codice:
    function codeAddress(address, info, tel) {
                //var address = document.getElementById('address').value;            
                geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {                
                    addMarker(results, address, info, tel);                    
                }            
                else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
              });
          }
    il fatto è che comunque (e lo dimostra parzialmente la riga commentata), visto che non ne sapevo niente, sono partito dalla documentazione

    https://developers.google.com/maps/d...ript/geocoding

    se scrolli fino a verso metà trovi un minimo di codice, con l'implementazione di codeAddress che riceve (o megli, pesca) da un textfield l'indirizzo in cui andare a piazzare il marker.

    Ora, quello che dovrebbe fare il tuo amico o che dovresti fare tu è:
    - decidere come organizzare il lavoro (volete separare le funzioni base - inizializzazione della mappa, codeAddress o come la vorrete chiamare etc) dal resto? Bene. File dedicato. Volete separare la lista degli indirizzi da cercare e di cui mettere un marker? Bene. File dedicato. Potete anche mettere in un file dedicato la funzione fx. Però bisogna che vi chiariate le idee e che guardiate la documentazione. Riadattare codice va bene, benissimo, però bisogna sapere su cosa si sta mettendo le mani, altrimenti si finisce come l'altra volta...

    A questo punto nella pagina "principale" non vi resterà che chiamare i vari file da includere (tag script) e definire lo spazio in cui andare a mostrare la mappa.
    Appena prima di creare file a parte, volevo che il programma nel complesso funzionasse e spulciando la documentazione google maps sono arrivato a questo risultato:
    codice:
    <!DOCTYPE html>
    <html>
      <head>
        <jsp:useBean class="beans.Bean" id="gpb"></jsp:useBean>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map-canvas { height: 100% }
        </style>
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
      </script>
      <script type="text/javascript">
         function initialize() {
            var myLatlng = new google.maps.LatLng(41.90,12.48);
            var mapOptions = {
              center: myLatlng,
              zoom: 9,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
            var geocoder;
           }
         
         function codeAddress(address, info, tel) {
            geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {                                    
                }            
            else {alert('Geocode was not successful for the following reason: ' + status);}
              });
            }
     
         function addMarker(address, info, tel) {          
            var marker = new google.maps.Marker({
                        map : map,
                        position : results[0].geometry.location,            
                        title : info        
                      });
              var contenuto = info+"<br />"+address+"<br />"+tel;
              var infowindow = new google.maps.InfoWindow({'content': contenuto});
              google.maps.event.addListener(marker, 'click', function() {infowindow.open(map, marker);});         
              return marker;
          }
     
         google.maps.event.addDomListener(window, 'load', initialize);
         </script>
    
        <script type="text/javascript">
        function fx(){
                <%=gpb.getElements()%>
                     }
        </script>
        </head>
    <body onload="initialize()">
     <div id="map-canvas"></div>
      <div>
        <input type="button" value="Encode" onclick="fx()">
      </div>
    </body>
    </html>
    Quando si carica il corpo del testo si carica la mappa e premendo sul button "encode" si chiama fx() che contiene le chiamatre a codeAddress come si può vedere dalla console web:
    function fx(){
    codeAddress(Rottofreno (Pc) Via Emilia Est S.Nicolo;Basko Spa;Tel 0523 762169)
    codeAddress(Piacenza (Pc) Via Emilia Pavese;Beverora Market S.N.C. Di Legatti M.C. & Rimondi J.;Tel 0523 498063)
    codeAddress(Castel San Giovanni (Pc) 1, Via Fellegara;Billa Ag;Tel 0523 882475)
    codeAddress(Castel San Giovanni (Pc) Via Emilia Pavese;Billa Aktiengesellschaft;Tel 0523 883687)
    codeAddress(Piacenza (Pc) Piazzale Marconi Guglielmo;Borgo-Faxhall Borgo Food Srl;Tel 0523 305231)
    codeAddress(Fiorenzuola D arda (Pc) 18, Via Pellico Silvio;C.Market Srl;Tel 0523 981396)
    codeAddress(Gragnano Trebbiense (Pc) 4, Via Trieste;C.Market Srl;Tel 0523 788373)
    codeAddress(Podenzano (Pc) 72, Via C. Colombo;Capuano Anna;Tel 0523 551097)
    ..............
    ..............
    }

    MA NON VISUALIZZA I FATIDICI MARKERS IN PIU' LA CONSOLE WEB DICE:
    [13:15:58.669] SyntaxError: missing ) after argument list @ http://localhost:8080/tesina/gpb.jsp...UPERMERCATO:52
    [13:16:06.148] ReferenceError: fx is not defined @ http://localhost:8080/tesina/gpb.jsp...SUPERMERCATO:1

  7. #7
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    richiami una funzione(fx) che non esiste perche dichiarata in un altra pagina. Non ho capito a che ti servono 2 pagine.

  8. #8
    Utente di HTML.it L'avatar di Mon91
    Registrato dal
    Jul 2013
    Messaggi
    52
    Quote Originariamente inviata da Vindav Visualizza il messaggio
    richiami una funzione(fx) che non esiste perche dichiarata in un altra pagina. Non ho capito a che ti servono 2 pagine.
    Ciao Vindav,
    giustamente ho spostato tutto in una singola pagina e questo è la situazione finale dopo le modifiche:
    posto la pagina jsp

    codice:
    <!DOCTYPE html>
    <html>
      <head>
        <jsp:useBean class="beans.Bean" id="gpb"></jsp:useBean>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          #map-canvas { height: 100%; 
                        width: 100%;
                        border: 0%;
                        padding: 0%;
                      }
                    
        </style>
        <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
          
          
          function addMarker(posizione, titolo,contenuto){
            var marker = new google.maps.Marker({
             position: posizione,
             map: map,
             title:titolo  }); 
             
             var infowindow = new google.maps.InfoWindow({content: contenuto});
             google.maps.event.addListener(marker, 'click', function() {infowindow.open(map, marker);});         
             return marker;
          }
          
          function geocode(indirizzo,desc,content){
            geocoder.geocode( { 'address': indirizzo}, function(results, status) {
                                                            if (status == google.maps.GeocoderStatus.OK) {
                                                            addMarker(results[0].geometry.location,desc,content);
                                                                                    }
                                                                                 }
            );
          }
    
          var map;
          var geocoder = new google.maps.Geocoder();
          function initialize() {
            var mapOptions = {
              center: new google.maps.LatLng(44.6885,10.6649),
              zoom: 9,
              mapTypeId: google.maps.MapTypeId.ROADMAP
              
              /*
              ROADMAP displays the normal, default 2D tiles of Google Maps.
              SATELLITE displays photographic tiles.
              HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
              TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).
              */
             
            };
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
          }
          
          
          
          function addP() {
            
            
            <%=gpb.getElements()%>
          
          }
          
          google.maps.event.addDomListener(window, 'load', initialize);
        </script>
      </head>
      <body>
        <h1 onclick="addP()"><strong><u>Cliccando qui</u> potrete visualizzare le sedi convenzionate con noi!</strong></h1>
        <div id="map-canvas"/>
      </body>
    </html>
    come si può vedere questa pagina è legata ad un bean, ma per comodità posto solamente una parte di ciò che stampa:
    codice:
    geocode("Modena (Mo) Via Emilia Est","Aguzzi Franco Alimentari","<h74>Tel  059 243293</h74>");
    geocode("Castelfranco Emilia (Mo) 6, Via Loda","Coop Estense (Soc.Coop.R.L.)","<h75>Tel  059 926141</h75>");
    geocode("Carpi (Mo) 31, Via Industria","Brico Business Cooperation Srl","<h76>Tel  059 691531</h76>");
    geocode("Modena (Mo) 1381, Via Emilia Est","Brico Business Cooperation Srl","<h77>Tel  059 285407</h77>");
    geocode("Vignola (Mo) 20, Via Della Resistenza","C.G. Snc Di Cavedoni Cinzia e Notari Giuseppe","<h78>Tel  059 767071</h78>");
    geocode("Modena (Mo) 500, Strada Delle Morane","Centro Commerciale La Rotonda G.D. Srl","<h79>Tel  059 448111</h79>");
    geocode("Bastiglia (Mo) 24, Via Tintori","Centro Commerciale Mazzone S.R.L.","<h80>Tel  059 816042</h80>");
    ORA VENIAMO AL PROBLEMA: SE FACCIO LA CHIAMATA A GEOCODE "MANUALMENTE" cioè in maniera statica, quando apro la pagina viene visualizzata la mappa con i tre o quattro (o anche tutti) i markers di prova; INVECE SE LO FACCIO IN MANIERA DINAMICA CON <%=gpb.getElements()%> NON SOLO NON VISUALIZZA I MARKER, MA NEANCHE LA MAPPA, COME SE IL CODICE INTERFERISSE IN UN QUALCHE MODO... la console web dice:
    codice:
    [16:21:17.556] ReferenceError: addP is not defined @ http://localhost:8080/nuovo/new.jsp?localita=restaurant:1
    NON SO DAVVERO COME FARE, NON HA SENSO! PER DI PIU' LA CONSOLE WEB MOSTRA CORRETTAMENTE TUTTE LE CHIAMATE A GEOCODE QUINDI IL PROBLEMA NON E' LI.
    SPERO POSSIATE AIUTARMI!

  9. #9
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    la console dice che la funzione addP non esiste, probabilmente perche c'è un errore al suo interno e quindi non la riconosce. Sicuro che il codice generato dal bean sia corretto? dallo spezzone che hai postato sembrerebbe di si dall'errore che ti da no. E' possibile che ci siano qualche virgolette o apici che rompono le balle, o magari qualche parentesi non chiusa ecc... Fai qualche prova... copia per esempio le prime righe del codice html generato in una pagina statica cosi da verificare se ti va ancora in errore, fai qualche prova del genere, se hai una pagina online di prova ti sarei piu di aiuto, cosi è difficile capire qual'è il problema.

  10. #10
    Utente di HTML.it L'avatar di Mon91
    Registrato dal
    Jul 2013
    Messaggi
    52
    Sto controllando il codice java con cui ho riempito il database anche se spero vivamente di non dover partire da zero a creare il database. Purtroppo staticamente crea tutti i markers che voglio, ma quando passo al dinamico e al.jsp non funziona più nulla!
    Spero di postare a breve la soluzione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.