[javascript] visualizzare marker su mappa di google

[UGoldrake]

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:

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

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]

Ciao non ho provato lo script ma manca una parentesi

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]

Ciao non ho provato lo script ma manca una parentesi

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:

position: Puntis[i] + ', ' + Puntis[i+1]

anche dentro new... latlng, ma niente da fare.

 

[criric]

Puoi postare un esempio completo di html e librerie? cosi per farci qualche prova

 

[UGoldrake]

Queste sono le librerie:

<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:

    <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

        //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:

           <%--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]

Non ho ben capito com'è formata la stringa che ti arriva da database
ti posto intanto un esempio funzionante

<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]

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++

    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]

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.

      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]

Ok, ma, una curiosità: se hai già le cordinate numeriche perchè usare il metodo Geocoder()?
se per esempio hai una stringa simile a questa

'44.403496;8.93555,44.402836;8.933641,44.404783;8.934306'

potresti fare anche cosi

<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]

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:

        //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]

la variabile nel tuo caso sarà in asp che non conosco
in php diventa cosi

<input type="button" value="Disegna Punti" onclick="DisegnaPunti('<?php echo $varibile_generata_da_database;?>')"/>