Creando un array in JS, scompare la mappa di Google

**hidran** · 27-11-2015, 21:20

A me funziona sempre da locale.
Posta tutto il tuo codice: sia javascript che html così vedo bene come mai.

**ubisum_biagio** · 27-11-2015, 22:16

Ok, grazie.
questo è l'html:

codice:

<html>
<head>

    <title>Mostra indicazioni</title>
    <style>
        html, body
{
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map
{
            height: 100%;
            float: left;
            width: 70%;
            height: 100%;
        }


    </style>

    <script type="text/javascript">
        function getValue(varname)
        {
            // First, we load the URL into a variable
var url = window.location.href;

            // Next, split the url by the ?
var qparts = url.split("?");

            // Check that there is a querystring, return "" if not
if (qparts.length < 2)
            {
                return "";
            }

            // Then find the querystring, everything after the ?
var query = qparts[1];

            // Split the query string into variables (separates by &s)
var vars = query.split("&");

            // Initialize the value with "" as default
var value = "";

            // Iterate through vars, checking each one for varname
for (i=0;i<vars.length;i++)
            {
                // Split the variable by =, which splits name and value
var parts = vars[i].split("=");

                // Check if the correct variable
if (parts[0] == varname)
                {
                    // Load value into variable
value = parts[1];

                    // End the loop
break;
                }
            }

            // Convert escape code
value = decodeURIComponent(value);

            // Convert "+"s to " "s
var replaced = value.split('+').join(' ');

            // Return the value
return replaced;
        }

    </script>

    <script src="https://maps.googleapis.com/maps/api/js..."></script>
    <script type='text/javascript' src="init_map.js">
    </script>
    <script>
        window.onload=function(){
            initMap();
        }
    </script>
</head>


<body>
<!-- spaces in page -->
<div id="id01">
</div>
<div id="map"></div>

<h1>Hello,
    <script type="text/javascript">
        var name = getValue("start_loc");
        var name2 = getValue("end_loc");
        document.write(name);
        document.write(name2);
    </script>

</h1>

</body>
</html>

Questo, invece, è il javascript int_map.js:

codice:

/**
 * Created by biagiomontesano on 23/11/15.
 */
function initMap() {
    // Google services
    var markers = new Array();
    var coordinates = new Array();
var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    //populateMap();
    // map's parameters
var map = new google.maps.Map
    (
        document.getElementById('map'),

        {
            zoom: 2,
            center: {lat: 41.85, lng: -87.65}
        }
    );

    // display map
directionsDisplay.setMap(map);    // create Http request
var xmlhttp = new XMLHttpRequest ();

    // state change function
xmlhttp.onreadystatechange = function ()
    {
        if (xmlhttp.readyState == 4)
        {
            if (xmlhttp.status == 200)
            {
                var arr = JSON.parse(xmlhttp.response);
                calculateAndDisplayRoute(directionsService, directionsDisplay, arr);

            }

            else
{
                document.getElementById('id01').innerHTML = 'Ops... qualcosa non ha funzionato - Stato HTTP: '
+ xmlhttp.status;
            }
        }

        else
{
            // NOPE
}
    };

    xmlhttp.open ('GET', 'search_points.php?start_loc=' + getValue("start_loc") + '&end_loc=' + getValue("end_loc"));
    xmlhttp.send (null);

}

function calculateAndDisplayRoute(directionsService, directionsDisplay,response)
{
    // declaring variables
var waypts = [];
    var arr = response;
var result = "";

    // populate waypoints array
for (var a in arr)
    {
        if (arr[a].Lat != undefined)
        {
            var lar = String(arr[a].Lat);
            var lon = String(arr[a].Lon);
waypts.push
(
                {
                    location: lar + "," + lon,
                    stopover: true
}
            );
        }
    }


directionsService.route
    (
        {
            origin: getValue("start_loc"),
            destination: getValue("end_loc"),
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.TravelMode.DRIVING
        },

        function(response, status)
        {
            if (status === google.maps.DirectionsStatus.OK)
            {
                directionsDisplay.setDirections(response);
      }

            else
{
                window.alert('Directions request failed due to ' + status);
            }
        }
    );
}

grazie dell'ausilio.

**hidran** · 28-11-2015, 13:13

A me funziona,

Nella chiamata AJAX , metti la url assoluta, ad esempio:

http://localhost/cartellaTest/search_endpoints.php

Ho provato a creare il file search_endpoints.php e ritorno un array di punti
e mi viene fuori alert location not found.
Per il resto la mappa funziona

**ubisum_biagio** · 28-11-2015, 16:43

Originariamente inviata da hidran

A me funziona,

Nella chiamata AJAX , metti la url assoluta, ad esempio:

http://localhost/cartellaTest/search_endpoints.php

Ho provato a creare il file search_endpoints.php e ritorno un array di punti
e mi viene fuori alert location not found.
Per il resto la mappa funziona

Sì, ho già provato a fare quello che dici e stampa correttamente i punti a schermo.
ho temporaneamente risolto il problema dell'array, sostituendo la creazione con new con quella col [], soluzione che viene suggerita anche sul web, per motivi di efficienza della memoria.

Però, sembra che sia proprio new a dargli fastidio, poiché ho aggiunto del nuovo codice e ora non gli piace questa riga:

codice:

var begin = new google.maps.LatLng(coordinates[0].Lat, coordinates[0].Lon);

ed è lo stesso "unexpected token new" di prima.

**hidran** · 28-11-2015, 18:49

Sicuramente si rompe prima e ti dà l'errore lì.
Guarda il sito http://www.mirovaweb.it/ , che ho sviluppato io.

Lì aggiungo i markers con

codice:

var myLatLng = new google.maps.LatLng(volcano.lat, volcano.lng);

dove ogni volcano ha un lat e lng e funziona correttamente.

Ho condiviso si jsbin il codice di esempio e lì vedi come uso new Array ( anche se è meglio [])

https://jsbin.com/qeyiwu/edit?js,output .

Tra l'altro, tra poco pubblicherò un corso su udemy.com in Italiano su come usare google map api .
Se ti interessa, fammi sapere che poi ti mando un coupon.

**ubisum_biagio** · 28-11-2015, 19:21

Originariamente inviata da hidran

Sicuramente si rompe prima e ti dà l'errore lì.
Guarda il sito http://www.mirovaweb.it/ , che ho sviluppato io.

Lì aggiungo i markers con

codice:

var myLatLng = new google.maps.LatLng(volcano.lat, volcano.lng);

dove ogni volcano ha un lat e lng e funziona correttamente.

Ho condiviso si jsbin il codice di esempio e lì vedi come uso new Array ( anche se è meglio [])

https://jsbin.com/qeyiwu/edit?js,output .

Tra l'altro, tra poco pubblicherò un corso su udemy.com in Italiano su come usare google map api .
Se ti interessa, fammi sapere che poi ti mando un coupon.

Ciao, grazie per la pazienza e per aver condiviso il codice.
Mi sembra di aver fatto uguale a come riportato nel tuo esempio, eccezion fatta per la creazione dell'array, che deriva dall'echo di un file PHP:

codice:

$fields=array('Lat','Lon');
$interest_points = array_fill_keys($fields, '');

...


if($count+1<8) {
    $interest_points[$count] = array("Lat" => $mid_lat, "Lon" => $mid_lon);
    $count++;
}

...


echo json_encode($interest_points);

La semplice visualizzazione dei punti e del percorso sulla mappa funziona. I problemi sono sorti quando ho cominciato a scrivere del nuovo codice per aggiungere nuove funzionalità.
L'istruzione che usi

codice:

var qualcosa = new Array()

mi causa il blocco completo della mappa, che non appare più.
Ho risolto con la dichiarazione con [], ma l'errore su console "unexpected token new" me lo dà per inizializzazioni trami google api. È strano che, nel flusso del codice, altre inizializzazioni come

codice:

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

    {
        zoom: 2,
        center: {lat: 41.85, lng: -87.65}
    }
);

gli sia piaciuto.

Ho aggiunto, alla fine del file JS la riga

codice:

google.maps.event.addDomListener(window, 'load', initMap);

e tolto dall'html

codice:

<script>
      window.onload=function(){
          initMap();
      }
  </script>

perché lo credo ridondante, a questo punto. Ma nulla è cambiato

**hidran** · 28-11-2015, 19:36

E' strano...
Riesci a metterlo online dove io possa vedere l'errore?

Ti posso dare un'atra idea:
1) Riparte da dove ti funzionava
2) metti il codice nuovo in una funzione, così isoli il problema
nella funzione .
3) chiama la funzione nel punto che ti serve, magari ritornando l'array od oggetto che ti occorre
incapsulare può evitare degli errori quando il codice diventa lungo...

**ubisum_biagio** · 28-11-2015, 19:54

puoi trovare un file zippato a questo indirizzo: https://drive.google.com/file/d/0Bz-...ew?usp=sharing

il file PHP fa un accesso al DB, quindi potrebbe non funzionare. è un po' confusionario perché stiamo facendo dei test.

1) per ripartire da dove funzionava, basta togliere la riga di codice con new che rompe le scatole

2) il nuovo codice è in una nuova funzione, come vedrai. dovrebbe poi essere invocata dalla funzione initMap dopo aver ricevuto i dati per GET
3) se ho capito bene, è una conseguenza della 1)

**hidran** · 29-11-2015, 19:05

Ciao,
Ho scompattato la cartella ma i file non sono leggibili...

**ubisum_biagio** · 01-12-2015, 20:12

ciao, scusa per il ritardo nella risposta.
il problema del NEW che non piaceva dipendeva dal fatto che facevo copia-incolla da un codice preso da internet e questa cosa non piaceva al server, mentre gli piaceva che io scrivessi le medesime righe di codice a mano.
stranissimo.

il codice attuale visualizza su internet un percorso passante per più punti, aggirando, almeno sulla carta, il problema del limite degli 8 waypoint.
il percorso sembra corretto, ma mettendo i pin a mano, questi non appaiono dove dovrebbero, cioè sui pallini lungo il percorso blu. di solito, appaiono leggermente spostati. provo a mandarti il codice(https://drive.google.com/file/d/0Bz-...ew?usp=sharing), nel caso tu voglia dargli un'occhiata. grazie

p.s. se ci sono ancora problemi, fammelo presente, posso mandarti la roba per mail.
non so se il comparatore del Mac possa creare problemi di compatibilità.

Discussione: Creando un array in JS, scompare la mappa di Google

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio