1

How do I convert an array of objects passed into a JavaScript function to a normal array of google.maps.LatLng objects that suitable for constructing a google.maps.Polyline. I am trying to initialize a google map instance from an array of lat/lnt objects passed in to a JavasSript function. Looking at my JavaScript console (in the Vhrome browser) I can see that I successfully receive an array of 66 objects.

The var updateMap = function (flightPlan) below is the place where I am having problems.

<script>
    // This example creates a 2-pixel-wide red polyline showing the path of
    // the first trans-Pacific flight between Oakland, CA, and Brisbane,
    // Australia which was made by Charles Kingsford Smith.
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            center: { lat: 0, lng: -180 },
            mapTypeId: 'terrain'
        });

        var flightPlanCoordinates = [
            { lat: 37.772, lng: -122.214 },
            { lat: 21.291, lng: -157.821 },
            { lat: -18.142, lng: 178.431 },
            { lat: -27.467, lng: 153.027 }
        ];
        var flightPath = new google.maps.Polyline({
            path: flightPlanCoordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        flightPath.setMap(map);

        // function to initialize google map with a flight plan
        // effectively an array of waypoints containing
        // latitude, longitude and bearing.  The flightPlan below
        // is an array of json objects.
        var updateMap = function (flightPlan) {
            // waypoint data is always a list of nulls
            console.log(flightPlan);
            // how do I create an array similar to
            // var flightPlanCoordinates above suitable
            // for initializing the google map
            var latLngArray;
            // how do I convert to suitable lat/lng array
            //waypointData.forEach(function(next)){
            //    latLngArray.push(new google.maps.LatLng(
            //        next.lat, next.lng));
            //}
            // waypoint data is always a list of nulls
            console.log(latLngArray);
        }

        // script called once web page loaded
        window.onload = function () {
            new QWebChannel(qt.webChannelTransport,
                function (channel) {
                    console.log(channel.objects);
                    // whenever the route data changes, invoke updateMap slot
                    var dataSource = channel.objects.routeIPC;
                    dataSource.routesChanged.connect(updateMap);
                }
            );
        }

    }
</script>
9
  • 1
    Ironically, you can use the .map() method. Commented Oct 29, 2018 at 18:54
  • can you give an example? Sorry but I am a javascript newbie. Commented Oct 29, 2018 at 18:55
  • latLngArray.map() Commented Oct 29, 2018 at 18:55
  • Also, you might have defined waypointData elsewhere (the commented out code in updateMap), but from your description, it seems that flightPlan is the array with coordinates, right? Commented Oct 29, 2018 at 19:02
  • 1
    Oh, it is an array of objects. It's just not JSON. What is the difference between JSON and Object Literal Notation? Commented Oct 29, 2018 at 19:55

1 Answer 1

1

Basic Usage, example is just modifying the object with a new property "ID", feel free to remove:

const normalArray = jsonArray.map(item => {
 const constructedItem = {...item, id: generateRandomID()};

 return constructedItem;
});
Sign up to request clarification or add additional context in comments.

Comments

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.