javascript - Passing data to another function

Question

I scraped data from Json and containing arrays in queryLat/queryLng after that I create another function initMap also bind it to google script. But I having hard to time passing queryLat and queryLng into initMap. "queryLat is not defined" pops up. How I can pass those to initMap.

    var queryLat = [];
    var queryLng = [];

    @foreach($estates as $est)
        var result = $.getJSON({
                url: 'https://maps.googleapis.com/maps/api/geocode/json?address={{$est->address}}&key={{env('GOOGLE_MAPS_API')}}'
            });

        result.done(function(data) {

            queryLat = data.results[0].geometry.location.lat;
            queryLng = data.results[0].geometry.location.lng;
        });
    @endforeach


    function initMap()
    {
        var options =
            {
                zoom : 10,
                center : {lat:34.652500, lng:135.506302}
            }

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


        for (var i = 0; i < queryLat.length; i++)
        {
            var newMarker = new google.maps.Marker
            ({
                position: {lat: queryLat[i], lng: queryLng[i]} ,
                map: map
            });
        }

    }

Answer 1

For multiple markers if you are defining arrays globally then you have to push your lat and long values in array and also need to update the marker variable to display diferent markers.. Hope it helps you to get the multiple markers.

var queryLat = []; var queryLng = [];

@foreach($estates as $est)
    var result = $.getJSON({
            url: 'https://maps.googleapis.com/maps/api/geocode/json?address={{$est->address}}&key={{env('GOOGLE_MAPS_API')}}'
        });

    result.done(function(data) {

        queryLat.push(data.results[0].geometry.location.lat);
        queryLng.push(data.results[0].geometry.location.lng);
    });
@endforeach

function initMap()
{
    var options =
        {
            zoom : 10,
            center : {lat:34.652500, lng:135.506302}
        }

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


    for (var i = 0; i < queryLat.length; i++)
    {
        var new_marker_str = "newMarker"+i;
        new_marker_str = new google.maps.Marker
        ({
            position: {lat: queryLat[i], lng: queryLng[i]} ,
            map: map
        });
    }

}