Creando un array in JS, scompare la mappa di Google

[ubisum_biagio]

Salve a tutti.
Premetto che sono un neofita della programmazione web, quindi vi chiedo scusa se la domanda a molti sembrerà sciocca.
Mettendo insieme un po' di codice trovato sul web, sono riuscito a scrivere una pagina html-JS che, ricevuti due indirizzi da un form, visualizzi il percorso fra essi su una mappa, usando gli API di Google. In un file PHP a parte, vengono generati dei waypoints attraverso i quali è richiesto che il percorso passi.
Ecco il 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;


    // 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;
    //window.alert('Numero elementi in arr ' + Object.keys(arr).length);
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);
            /*            var lar = String(arr[a]["Lat"]);
             var lon = String(arr[a]["Lon"]);*/
waypts.push
(
                {
                    location: lar + "," + lon,
                    stopover: true
}
            );
        }
    }


    //var start = new google.maps.LatLng(42.327463, -87.973640);
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);
                /*                     var route = response.routes[0];
                 var summaryPanel = document.getElementById('directions-panel');
                 summaryPanel.innerHTML = '';
                 // For each route, display summary information.
                 for (var i = 0; i < route.legs.length; i++)
                 {
                 var routeSegment = i + 1;
                 summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
                 '</b><br>';
[I]                 summaryPanel.innerHTML += route.legs.start_address + ' to ';
[I]                 summaryPanel.innerHTML += route.legs.end_address + '<br>';
[I]                 summaryPanel.innerHTML += route.legs.distance.text + '<br><br>';
                 }*/
}

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

Ora, sto provando ad aggiungere nuove funzionalità e ho bisogno di creare un array. Lo vedete all'inizio della funzione initMap.
La sola aggiunta di questa riga impedisce alla mappa di essere visualizzata e non riesco a capire perché. Potreste darmi una mano?

Grazie.

[hidran]

Quella riga di codice non può essere la causa: è ok come javascript.

Ricarica la pagina e fai f12 per vedere la console (chrome) . Va' sul tab console e guarda se c'è qualche errore.
Nel tab network seleziona xhr così vedi la chiamata ajax e guarda se percaso stato restituendo qualcosa di sbagliato

[ubisum_biagio]

Quella riga di codice non può essere la causa: è ok come javascript.

Ricarica la pagina e fai f12 per vedere la console (chrome) . Va' sul tab console e guarda se c'è qualche errore.
Nel tab network seleziona xhr così vedi la chiamata ajax e guarda se percaso stato restituendo qualcosa di sbagliato

Grazie per la risposta. ho provato la console JavaScript di Chrome e non mi esce l'errore"Unexpected token new".
Non capisco.

[hidran]

Ciao,
Ho copiato il tuo codice javascript e mi sono creato l'html:

<!DOCTYPE html>
<html>
  <head>
   <style>
      #map {
        width: 500px;
        height: 400px;
      }
    </style>
	<script src="https://maps.googleapis.com/maps/api/js"></script>
	<script src="googlemap.js"></script>
	<script>
window.onload=function(){
	initMap();
}
	
	</script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

e la mappa me la mostra...

[ubisum_biagio]

Ecco il mio codice HTML (lo so, è scritto da un novellino):

<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 == 0)
            {
                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>
</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>


<script type='text/javascript' src="init_map.js">


</script>

<script src="https://maps.googleapis.com/maps/api/js"
async defer></script>
</body>
</html>

c'è qualcosa che ti sembra strano?

[hidran]

Ci sono due cose:

1) dove chiami initMap() ? se non la chiami non renderizzi la mappa

2) Nella funzione geValue, dove c'è scritto if(qparts.length ==0)
deve esserci if(qparts.length <2) .

lo split ritornerà due se ci sono parametri nella url , altrimenti ritorna in qparts[0] la URL
e qparts[1] non esisterebbe (undefined)

[ubisum_biagio]

Ci sono due cose:

1) dove chiami initMap() ? se non la chiami non renderizzi la mappa

2) Nella funzione geValue, dove c'è scritto if(qparts.length ==0)
deve esserci if(qparts.length <2) .

lo split ritornerà due se ci sono parametri nella url , altrimenti ritorna in qparts[0] la URL
e qparts[1] non esisterebbe (undefined)

grazie per la tua pazienza.
guardando il tuo esempio, ho spostato la dichiarazione dello script nell'header, insieme a quello che fornisce la sorgente agli api di google.
sembra funzionare.
ora visualizza la mappa nonostante la presenza delle dichiarazioni degli array.
posso permettermi due domande? se non ti va, non rispondere.

a) come mai, pur nelle condizioni precedenti (evidentemente sbagliate) visualizzava la mappa, senza la dichiarazione degli array?
b) perché mettere lo script che inizializza la mappa dell'header e non nel body?

grazie ancora.

[hidran]

Lo script lo puoi mettere dove vuoi ma ci sono alcune considerazioni da tenere in conto.

1) Se non vuoi che il caricamento del file .js ti rallenti il caricamento del DOM della pagina, allora
lo metti nel fondo della pagina ma nessuno script caricato precedentemente può farci riferimento finché non
si è caricato

2) Nel tuo codice c'era l'attributo async nel caricamento del codice di google map API ma la funzione initMap
ci fa riferimento. Quindi se la libreria non è carica, possono essere dei problemi

A me il codice tuo dava errore nella funzione getValue perché il problema di aparts.length. Inoltre non c'era la chiamata
initMap() da nessuna parte...

Ad ogni modo, non era la riga del array a bloccarti il rendering...

[ubisum_biagio]

grazie delle risposte.
ho cominciato a fare seriamente queste cose da soli 15 giorni.
terrò a mente i tuoi consigli.

[ubisum_biagio]

comunque, sto riscontrando che ci sono dei casi in cui continua a non caricare la mappa. poi, magari, dopo qualche tentativo me la carica.
potrebbe dipendere dal mancato caricamento degli api per via della questione dell'asincronicità che dicevi?
considera, se può servire, che sto lavorando in locale con XAMPP.
esiste un modo, se questo è il problema, per assicurarsi che gli api vengano caricati sempre correttamente?