[javascript] visualizzare marker su mappa di google

U

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.
 
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])),
 
criric ha scritto:
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])),
Clicca per allargare...
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.
 
Puoi postare un esempio completo di html e librerie? cosi per farci qualche prova
 
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.
 
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
 
Intanto grazie.
criric ha scritto:
Non ho ben capito com'è formata la stringa che ti arriva da database
Clicca per allargare...
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.
 
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.
 
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:
 
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.
 
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;?>')"/>
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

V
[Javascript] Visualizzare o nascondere div figlio
Risposte
4
Visite
3K
Javascript
macus_adi
macus_adi
S
[javascript] visualizzare/nascondere div
Risposte
3
Visite
4K
Javascript
IKOULA CLOUD
IKOULA CLOUD
felino
[Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva
Risposte
0
Visite
1K
Javascript
felino
felino
W
[Javascript] Visualizzare l'href di un link nascosto
Risposte
0
Visite
1K
Javascript
w_t
W
M
variabile javascript su link html
Risposte
5
Visite
2K
Javascript
mizar1966
M
I
Creare un banner temporaneo JavaScript
Risposte
0
Visite
2K
Javascript
IlTizioScriptato
I
S
Impossibile scorrere un oggetto in JavaScript
Risposte
0
Visite
2K
Javascript
steven myth
S
N
Passare array da php a javascript
Risposte
5
Visite
3K
PHP
WmbertSea
WmbertSea
L
Quiz javascript funzionante da migliorare
Risposte
0
Visite
3K
Javascript
Lenigmista
L
P
  • Bloccata
errore 404 con javascript
Risposte
2
Visite
1K
Javascript
Max 1
Max 1
D
  • Bloccata
aiuto funzioni javascript
Risposte
1
Visite
956
Javascript
Max 1
Max 1
M
Upload immagine con javascript problemi con FormData()
Risposte
1
Visite
1K
Javascript
MBlackmore
M
L
  • Bloccata
countdown multiplo javascript
Risposte
1
Visite
1K
Javascript
Max 1
Max 1
S
  • Bloccata
Problemi Javascript + Aruba
Risposte
2
Visite
2K
Javascript
Max 1
Max 1
M
Inviare un file su un server remoto con JavaScript
Risposte
0
Visite
1K
Javascript
Mirawara
M
T
a href="javascript:;"
Risposte
1
Visite
2K
Javascript
sonusood2022
S
F
Creare elementi html con javascript
Risposte
3
Visite
3K
Javascript
McLeanerGla
M
A
pulsante di update campo mysql con javascript
Risposte
2
Visite
1K
Javascript
AndreaCerre
A
8
Javascript - PDF Form
Risposte
0
Visite
2K
Javascript
81bankai
8
B
javascript per problemi con pdf e Safari
Risposte
0
Visite
3K
Javascript
bibliofila
B
Alto Basso