[javascrpit] info marker google maps con cicli

**boxer89** · 23-10-2012, 15:14

ho il file cars.js da cui estraggo le informazioni e
ho la mia pagina creata da me ,in cui le informazioni sono estratte con successo e i marker posizionati sulla mappa secondo le coordinate estratte dal file,ma con le informazioni che spuntano dal marker al passaggio del click del mouse sopra,le informazioni non escono,cosa sbaglio? e soprattutto come posso far scorrere nel ciclo anche delle foto indicizzate da 0 a 9 contunte in una cartella a parte? grazie

codice:

<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google maps</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> window.onload = function(){ $.getJSON( "cards.js", function (data) { var cards = data; var len = cards.length; // imposta le opzioni di visualizzazione var options = { zoom: 4, center: new google.maps.LatLng(cards[0].Latitude,cards[0].Longitude), mapTypeId: google.maps.MapTypeId.SATELLITE }; // crea l'oggetto mappa var map = new google.maps.Map(document.getElementById('map'), options); var marker = new Array(); var infowindow = new Array(); for (a=0; a<cards.length; a++){ marker[a] = new google.maps.Marker({ position: new google.maps.LatLng(cards[a].Latitude,cards[a].Longitude), map: map, title: cards[a].PropertyName }); infowindow[a] = new google.maps.InfoWindow({ content: '[img]slide/'+a+'.jpg[/img]'+ '<div id="tooltip">'+ '

'+cards[a].PropertyName+'
'+ 'city: '+cards[a].City+'
'+ 'description: '+cards[a].Description+'</p>'+ '</div>' }); google.maps.event.addListener(marker[a], 'click', function() { infowindow[a].open(map,marker[a]); }); } }); } </script> </head> <body style="margin:0; padding:0;"> <div id="map" style="width:100%; height:100%"></div> </body> </html>

**boxer89** · 23-10-2012, 15:20

se vi può essere utile qui c'è quello che ho fatto http://www.2shared.com/file/A63EymIf/europe.html

**LeleFT** · 23-10-2012, 15:38

Magari, se posti nel forum "JavaScript" sei più in tema...

Sposto.

Ciao.

**Al_katraz984** · 23-10-2012, 15:44

se formatti il codice meglio...

Codice PHP:


createMarker: function (pos, infoContent, map) {

    var options, marker, info;

    options = {

        position: pos

    };



    marker = new google.maps.Marker(options);



    info = new google.maps.InfoWindow();

    info.setContent(infoContent);





    google.maps.event.addListener(marker, 'click', function () {

        info.open(map, marker);

    });

}

con questa funzione crei i marker con infoWindow.... adattala alle tue esigenze..

**boxer89** · 23-10-2012, 16:29

creare i marker con le relative info lo avevo già capito come fare,il problema è che io estraggo da un file (che contiene un grosso array) che contiene le coordinate e la descrizione da mettere nelle info. per i marker non c'è stato problema e con un ciclo for gli ho passati tutti,ma non riesco altrettanto a fare il for per le informazioni che scono dopo aver fatto il click sul marker,e non capisco dove sbaglio,qua il mio codice

Codice PHP:


<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <title>Google maps</title>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery.min.js"></script>

    <script type="text/javascript">

        

        window.onload = function(){

            $.getJSON(

                "cards.js",

                function (data) {

                    var cards = data;

                    var len = cards.length;

                    // imposta le opzioni di visualizzazione

                    var options = { 

                        zoom: 4,

                        center: new google.maps.LatLng(cards[0].Latitude,cards[0].Longitude),

                        mapTypeId: google.maps.MapTypeId.SATELLITE

                    };



                    // crea l'oggetto mappa

                    var map = new google.maps.Map(document.getElementById('map'), options);



                    var marker = new Array();

                    var infowindow = new Array();

                    for (a=0; a<cards.length; a++){

                        marker[a] = new google.maps.Marker({ 

                                position: new google.maps.LatLng(cards[a].Latitude,cards[a].Longitude),

                                map: map,

                                title: cards[a].PropertyName 

                            });

                            

         

                    

        infowindow[a] = new google.maps.InfoWindow({

        content: '[img]slide/'+a+'.jpg[/img]'+

        '<div id="tooltip">'+

        '

[b]'+cards[a].PropertyName+'[/b]
'+

        'city: '+cards[a].City+'
'+

        'description: '+cards[a].Description+'</p>'+

        '</div>'

        

        });

                google.maps.event.addListener(marker[a], 'click', function() {

        infowindow[a].open(map,marker[a]);

    });        

                    

                    }

                        

                    

                });

            }

    </script>

</head>

<body style="margin:0; padding:0;">

    <div id="map" style="width:100%; height:100%"></div>

</body>

</html>

**Al_katraz984** · 23-10-2012, 16:43

ipotizzando che la tua variabile "cards" abbia tutti i dati necessari:

Codice PHP:


function (data) {

    var cards = data;

    var len = cards.length;

    // - perchè crei la mappa al volo qui dentro??? 

    // imposta le opzioni di visualizzazione

    var options = { 

        zoom: 4,

        center: new google.maps.LatLng(cards[0].Latitude,cards[0].Longitude),

        mapTypeId: google.maps.MapTypeId.SATELLITE

    };

    // crea l'oggetto mappa

    var map = new google.maps.Map(document.getElementById('map'), options);

    /**************************************/

    var markerArray = new Array();



    for (a=0; a<cards.length; a++) {

        var marker = new google.maps.Marker(

            {

            position: new google.maps.LatLng(cards[a].Latitude,cards[a].Longitude),

            map: map,

            title: cards[a].PropertyName 

            }

        );

        var infoContent = '[img]slide/'+a+'.jpg[/img]'+'<div id="tooltip">'+

                        '

[b]'+cards[a].PropertyName+'[/b]
'+

                        'city: '+cards[a].City+'
'+

                        'description: '+cards[a].Description+'</p>'+

                        '</div>'; //questo lo farei in modo diverso..

        var infowindow = new google.maps.InfoWindow();

        infowindow.setContent(infoContent);



        google.maps.event.addListener(marker, 'click', function() {

            infowindow.open(map, marker);

        });



        markersArray.push(marker);

    }

}

markers e infowindow non sono degli array..... prova cosi maari c'è qualche errore di scrittura

**boxer89** · 23-10-2012, 16:53

piccolo problema però,inserendo la funzione da te suggerita,si vede solo il primo marker e tutti gli altri no

**Al_katraz984** · 23-10-2012, 16:57

Originariamente inviato da boxer89
piccolo problema però,inserendo la funzione da te suggerita,si vede solo il primo marker e tutti gli altri no

quale funzione?

**boxer89** · 23-10-2012, 17:00

mi sn espresso male,ho scritto il codice così come dà te consigliato,la foto e la descrizione nel marker me le stampa,il problema è che stampa sulla mappa solo il primo marker

**Al_katraz984** · 23-10-2012, 17:06

Codice PHP:


for (var a=0; a<cards.length; a++) {

ad occhio... c'è qualche errorino di battitura..

Discussione: [javascrpit] info marker google maps con cicli

Strumenti discussione

Ricerca discussione

Visualizza

[javascrpit] info marker google maps con cicli

Moderazione

Permessi di invio