0

I am trying to solve a scoping issue with the webapp i'm building. the array called paths are being filled with coordinates from a XML file. I create the array before the functions, so that it will be a global variable. I'm able to console.log the whole array after its being filled with coordinates, but i can't run it through jQuery each loop og a javascript for loop. It's important that i can run it through a loop afterwards because i need to calculate the distances between the points with google.maps.geometry.spherical.computeDistanceBetween().

Thanks in advance! :)

My code is below:

    $(document).ready(function() {
        var newLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
        MYMAP.init('#map-img', newLatLng, 3);
        MYMAP.placeMarkers('xml/coordinats.xml');        
    });

    var MYMAP = {
        map: null,
        bounds: null
    };

    MYMAP.init = function(selector, latLng, zoom) {
        var myOptions = {
            zoom: zoom,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true, // a way to quickly hide all controls
            mapTypeControl: false,
            scaleControl: true,
            zoomControl: false,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE
            },
            minZoom: 3
        };
        this.map = new google.maps.Map($(selector)[0], myOptions);
        this.bounds = new google.maps.LatLngBounds();
    };

    var currentRouteId = <?php echo json_encode($route_id)?>; 

    var paths = new Array;
    var i = 0;

    MYMAP.placeMarkers = function(filename) {
        $.get(filename, function(xml) {
            $(xml).find("koordinator").each(function() {
                var routeId = $(this).find('rute_id').text();
                var routeIdInt = parseInt(routeId);

                var lat = $(this).find('lat').text();
                var lng = $(this).find('lng').text();
                var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

                var markerXML = $(this).find('marker').text();

                var markerImg = "images/" + markerXML;

                if (routeIdInt === currentRouteId) {

                    paths.push(point);


                    // extend the bounds to include the new point
                    MYMAP.bounds.extend(point);

                    var marker = new google.maps.Marker({
                        position: point,
                        map: MYMAP.map,
                        clickable: false,
                        options: {icon: new google.maps.MarkerImage(markerImg)}
                    });

                    MYMAP.map.fitBounds(MYMAP.bounds);
                }
            });
        });
    };

    console.log(paths);
2
  • Exactly where in the code is it that paths turn out to be empty? Please place a marker. Commented Apr 13, 2014 at 19:44
  • 1
    What specifically is your question/problem? Can you provide a jsfiddle that demonstrates it? Your console.log(paths) is going to execute long before the map is initialized and the markers are placed on it (as that is done on document.ready). Commented Apr 13, 2014 at 19:54

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.