[javascript] visualizzare marker su mappa di google

UGoldrake

Nuovo Utente
19 Feb 2014
8
0
0
Salve a tutti.
Sto cercando di visualizzare una serie di marker su una mappa di google inserita uin una pagina web.
Lavoro con VS 2010 e javascript.
Sul sito di google developers ho trovato come disegnare i marker, ma la mia applicazione non ne vuole sapere.
Dalla parte VB.net creo una query da un db postgres usando NpgSqlConnection, creo una stringa che passo alla funzione javascript che la elabora e dovrebbe disegnare i punti sulla mappa.
La funzione che uso è la seguente:
Codice:
function DisegnaPunti(Punti) {
            geocoder = new google.maps.Geocoder();
            //crea l'array dalla stringa passata da vb.net
            var Puntis = Punti.split(",").map(String);
            //ciclo che disegna i Punti
            var posto;
            for (var i = 0; i != Puntis.length; i = i + 2) {
                //alert(Puntis[i])
                posto = '(' + parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]) + ')';
                geocoder.geocode({ 'address': '(' + parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]) + ')' }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        map.setZoom(18);
[COLOR="#FF0000"]                        var marker = new google.maps.Marker({
                            map: map,
                            location: new google.maps.LatLng(parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1]), //parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1])),
                            // oppure questa al posto di location   position: results[0].geometry.location
                            icon: 'Immagini/mm_20_red.png',
                            title: 'Coordinate: ' + Puntis[i] + ', ' + Puntis[i + 1] + ' - ' + results[0].geometry.location
                        }); //chiude var marker
[/COLOR]                             alert(results[0].geometry.location)
                    } else {
                        alert('Ciao - Geocode was not successful for the following reason: ' + status);
                    } //chiude if
                }); //chiude geocoder
            } //chiude for
        } //chiude function
Il problema sta nella parte in rosso, perché pare che in quel punto le variabili Puntis diano valore 'undefined'.
Ho provato a passarle in mille e più modi, nell'ultimo mese ci ho perso veramente un sacco di tempo, ma non c'è stato verso.
Per la verità questa funzione è successiva ad un'altra che si chiama inizialize, sempre in javascript, che alla pressione di un pulsante trova la via indicata in una textbox, la visualizza, centra la mappa su di essa e ne disegna correttamente il marker 'CentroMappa'; tale funzione termina con la riga
Codice:
google.maps.event.addDomListener(window, 'load', initialize);
Non so se è questa che gli dà fastidio, fatto sta che o non mi disegna i punti lasciandomi la mappa vuota, oppure va in debug, oppure ancora disegna 5 punti che sono quelli che mi aspetto in quella zona, ma li disegna in posizioni errate di un centinaio di metri.
Il fatto è che ho rivoltato questo codice come un calzino, ma non disegna ancora ciò che voglio.

Come ho detto nella mia presentazione, da parecchio tempo sono iscritto ad un altro forum, a cui ho ovviamente esposto questa mia problematica, purtroppo senza risolverla. Ovviamente anche gli utenti dell'altro forum mi hanno dato parecchie indicazioni, ed io rispettando la giusta netiquette mi son guardato bene dal fare postcrossing. Ritengo però che il tempo trascorso da quando ho chiesto aiuto sia sufficiente da giustificare la richiesta anche a Voi, senza nulla togliere alla disponibilità degli utenti dell'altro forum.
Ringrazio tutti, ciao, Ugo.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao non ho provato lo script ma manca una parentesi
Codice:
location: new google.maps.LatLng(parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1])[B][COLOR="#FF0000"])[/COLOR][/B], 
//parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1])),
 

UGoldrake

Nuovo Utente
19 Feb 2014
8
0
0
Ciao non ho provato lo script ma manca una parentesi
Codice:
location: new google.maps.LatLng(parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1])[B][COLOR="#FF0000"])[/COLOR][/B], 
//parseFloat(Puntis[i]) + ', ' + parseFloat(Puntis[i + 1])),
Grazie, purtroppo non è quello il problema, questo è solo un copia incolla senza la parentesi, purtroppo.
Ho provato anche:
Codice:
position: Puntis[i] + ', ' + Puntis[i+1]
anche dentro new... latlng, ma niente da fare.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Puoi postare un esempio completo di html e librerie? cosi per farci qualche prova
 

UGoldrake

Nuovo Utente
19 Feb 2014
8
0
0
Queste sono le librerie:
Codice:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Fa questo: carica il form con una casella di testo in cui bisogna inserire una via e la mappa centrata sulla città di Genova allo zoom migliore per iniziare:
Codice:
    <script type="text/javascript">
        var geocoder;
        var map;
        var lat;
        var lon;
        var Piazzole;


//(1) alla selezione della via desiderata la mappa si centra su di essa e ne visualizza il marker determinato da Google Maps (1)
        function initialize() {
//carica il geocoder della mappe: fidati
            geocoder = new google.maps.Geocoder();
//definisce le coordinate del centro di Genova con la mappa a zoom 12
            var latlng = new google.maps.LatLng(44.43, 8.95);
            var mapOptions = {
                zoom: 12,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        function codeAddress(address) {
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': "Genova, " + address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    if (results[0].geometry.location == '(44.4056499' + ', ' + '8.946255999999948)') {
                        alert('Toponimo non mappato da Google') // Vale per le vie nuove, non ancora inserite nelle mappe di google
                        //                        alert(results[0].geometry.location)
                    } else {
                        //                        alert('ok')
                        //                        alert(results[0].geometry.location)
                    }
                    map.setZoom(18);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        mapTypeId: google.maps.MapTypeId.HYBRID
                    });
//                    alert(results[0].geometry.location)
                    document.getElementById('<%=txtCoord.ClientId %>').value = results[0].geometry.location
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);

Qui inserisco il codice per un pulsante che mi trovi il centro mappa, mi servirà in seguito
Codice:
        //Inizio Funzione che rileva le coordinate del centro della mappa
        function GetCentroMappa() {
            geocoder = new google.maps.Geocoder();
            var CentroMappa = map.getCenter();
                var marker = new google.maps.Marker({
                map: map,
                position: CentroMappa,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                title: "" + CentroMappa
            });
            alert(CentroMappa)
        }
        // Fine Funzione che rileva le coordinate del centro della mappa
Di seguito il codice che non sto a ripetere per non appesantire troppo la lettura.
Quindi segue il body della pagina asp:
Codice:
           <%--In una casella l'utente indica il nome della strada che desidera vedere--%>
            <td style="text-align: right;">
                <asp:TextBox ID="txtCoord" runat="server" ></asp:TextBox>
                    Indica via e civico
                <asp:TextBox ID="address" runat="server"></asp:TextBox>
                <%--Il pulsante ricerca sul db un elenco di strade che comprendono la scelta dell'utente--%>
                <asp:Button usesubmitbehavior="true" ID="btnCerca" runat="server" Text="Cerca" />
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td class="style1">
                <%--Nel marker "map-canvas" viene disegnata la mappa di google-maps--%>
                <div id="map-canvas" visible="true" style="height: 530px; width: 1345px;">
                </div>
            </td>
Questo è la parte di codice che comanda quasi tutto, qualsiasi indicazione è ben accetta, perché ripeto, sono del gatto, come si dice dalle mie parti.
Ciao, Ugo.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Non ho ben capito com'è formata la stringa che ti arriva da database
ti posto intanto un esempio funzionante
HTML:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    var geocoder;
    var map;
    var lat;
    var lon;
    var Piazzole;
    //(1) alla selezione della via desiderata la mappa si centra su di essa e ne visualizza il marker determinato da Google Maps (1)
    function initialize() {
        //carica il geocoder della mappe: fidati
        geocoder = new google.maps.Geocoder();
        //definisce le coordinate del centro di Genova con la mappa a zoom 12
        var latlng = new google.maps.LatLng(44.43, 8.95);
        var mapOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    
    function DisegnaPunti(Punti) {
        geocoder = new google.maps.Geocoder();
        //crea l'array dalla stringa passata da vb.net
        var Puntis = Punti.split(",");
        //ciclo che disegna i Punti
        for (var i = 0; i < Puntis.length; i++) {
            
            geocoder.geocode({ 'address': '(' + Puntis[i] + ')' }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    map.setZoom(16);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location,
                        icon: 'Immagini/mm_20_red.png',
                        title: 'Coordinate: ' + results[0].geometry.location
                    }); //chiude var marker
                    alert(marker.position)
                } else {
                    alert('Ciao - Geocode was not successful for the following reason: ' + status);
                } //chiude if
            }); //chiude geocoder
        } //chiude for
    } //chiude function
</script>
    
<div id="map-canvas" visible="true" style="height: 430px; width: 1045px;">
</div>
<input type="button" value="Disegna Punti" onclick="DisegnaPunti('Via Paolo Reti GE,Via Agnese Battista GE')"/>
ho ridotto leggermente la mappa perche nel mio monitor non ci stava
 

UGoldrake

Nuovo Utente
19 Feb 2014
8
0
0
Intanto grazie.
Non ho ben capito com'è formata la stringa che ti arriva da database
Il tuo dubbio sta nel fatto che sulla riga del for faccio i+2 anziché i++
Codice:
    var Puntis = Punti.split(",").map(String);
    for (var i = 0; i != Puntis.length; i = i + 2) {
questo perché la stringa la costruisco prendendo i dati da db e dividendo le coppie lat long con un punto e virgola dalla successiva coppia lat long; altrimenti posso unire tutte le coordinate lat, long, lat, long, con la virgola, e poi usare i++.
Non so se mi sono spiegato, in un caso ho una coppia di coordinate, quindi devo usare i+2 per avere la lat1 e lat2, mentre nel caso abbia lat long lat long consecutive ed ognuna per sé, allora uso i++.

Comunque il tuo sistema è interessante, ma all'avvio mi dice: "There were build errors. Continuo con l'ultima versione funzionante? si/no.", dicendo di si continua senza errori, però mostra solo i punti che identificano la via con il db di google., non le coordinate presenti nel mio db, cioè se tu vai su google maps e digiti una via, ti manderà sempre nello stesso punto che è quello che disegna la tua soluzione: results[0].geometry.location, però io voglio passargli le coordinate di una serie di punti, le coordinate le ho nell'array Puntis, ma non c'è verso di fargliele disegnare.
Ciao, Ugo.
 

UGoldrake

Nuovo Utente
19 Feb 2014
8
0
0
Nel frattempo gli amici dell'altro forum hanno postato una soluzione funzionante e direi definitiva.
Ovviamente la condivido per tutti quelli che ne avessero bisogno.

Codice:
      var Punti = new Array();
                function DisegnaPunti(Punti) {
                    geocoder = new google.maps.Geocoder();
                    //crea l'array dalla stringa passata da vb.net
                    var Puntis = Puntis.split(",").map(String);
                    //ciclo che disegna le piazzole
                    for (var i = 0; i != Puntis.length; i = i + 2) {
                        posto = Puntis[i] + ', ' + Puntis[i + 1];
                        var pt = new google.maps.LatLng(parseFloat(Puntis[i]), parseFloat(Puntis[i + 1]));
                        (function (point) {
                            geocoder.geocode({ location: point }, function (results, status) {
                            //alert('(' + Puntis[i] + ', ' + Puntis[i + 1] + ')')
                            if (status == google.maps.GeocoderStatus.OK) {
                                map.setCenter(results[0].geometry.location);
                                map.setZoom(18);
                                marker = new google.maps.Marker({
                                    map: map,
                                    //animation: google.maps.animation.DROP,
                                    position: point,
                                    icon: 'Immagini/mm_20_red.png',
                                    title: 'Coordinate: ' + point //results[0].geometry.location
                                }); //chiude var marker
                                //alert(pt)
                                                    //alert(results[0].geometry.location)
                            } else {
                                alert('Ciao - Geocode was not successful for the following reason: ' + status);
                            } //chiude if
                        }); //chiude geocoder
                        })(pt);//chiude point
                    } //chiude for
                } //chiude function

Grazie ancora a tutti coloro che hanno contribuito e agli altri che contribuiranno, forse non qui, forse non ora, ma prima o poi, da qualche parte, lo faranno di certo.
Ciao, Ugo.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ok, ma, una curiosità: se hai già le cordinate numeriche perchè usare il metodo Geocoder()?
se per esempio hai una stringa simile a questa
Codice:
'44.403496;8.93555,44.402836;8.933641,44.404783;8.934306'
potresti fare anche cosi
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type = "text/javascript" >
    var map;
    function initialize() {
        var latlng = new google.maps.LatLng(44.43, 8.95);
        var mapOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }

    function DisegnaPunti(Punti) {
        var Puntis = Punti.split(",");
        for (var i = 0; i < Puntis.length; i++) {
            var coord = Puntis[i].split(";");
            var latlng = new google.maps.LatLng(coord[0], coord[1]);
            map.setCenter(latlng);
            map.setZoom(16);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: "Coordinate : " + coord[0] + " " + coord[1]
            });
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas" visible="true" style="height: 430px; width: 1045px;"></div>

<input type="button" value="Disegna Punti" onclick="DisegnaPunti('44.403496;8.93555,44.402836;8.933641,44.404783;8.934306')"/>
In ogni caso i vecchi saggi dicono "Se funziona lascia che funzioni" :fonzie:
 

UGoldrake

Nuovo Utente
19 Feb 2014
8
0
0
In effetti è vero, però io non conosco javascript né tanto meno come utilizzarlo con google maps.
Mi sono letto tutto il sito developers.google... e da lì ho fatto delle prove e sono arrivato a questo codice:
Codice:
        //Inizio Funzione che rileva le coordinate del centro della mappa
        function GetCentroMappa() {
            geocoder = new google.maps.Geocoder();
            var CentroMappa = map.getCenter();
                var marker = new google.maps.Marker({
                map: map,
                position: CentroMappa,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                title: "" + CentroMappa
            });
        }
        // Fine Funzione che rileva le coordinate del centro della mappa
Poi mi sono detto che se con CentroMappa trovo un punto, allora se eseguo un ciclo FOR passandogli una coordinata latlong al posto di CentroMappa, dovrebbe disegnare il marker dove voglio io, ma così non è, chissà perché, ce l'avrà con me.
Inoltre ho notato che nel tuo esempio passi l'elenco delle coordinate al pulsante dalla parte html, ovviamente ci posso mettere le coordinate solo se so quali sono, ma siccome possono variare, devo metterci per forza la variabile Punti, onclick="Disegn Punti(Punti)", e mi dà errore.
Ciao, Ugo.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
la variabile nel tuo caso sarà in asp che non conosco
in php diventa cosi
PHP:
<input type="button" value="Disegna Punti" onclick="DisegnaPunti('<?php echo $varibile_generata_da_database;?>')"/>
 
Discussioni simili
Autore Titolo Forum Risposte Data
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
S [javascript] visualizzare/nascondere div Javascript 3
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
W [Javascript] Visualizzare l'href di un link nascosto Javascript 0
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 4
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
K [javascript] Tecnica per rilevare celle contenenti caratteri ricevute in dinamico Javascript 1

Discussioni simili