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>
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
johnco3
  • 2,401
  • 4
  • 35
  • 67
  • 1
    Ironically, you can use the .map() method. – XaxD Oct 29 '18 at 18:54
  • can you give an example? Sorry but I am a javascript newbie. – johnco3 Oct 29 '18 at 18:55
  • latLngArray.map() – XaxD Oct 29 '18 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? – thmsdnnr Oct 29 '18 at 19:02
  • [There is no such thing as a "JSON Object"](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/) – Felix Kling Oct 29 '18 at 19:03
  • actually flightPlan is a json array of objects - each one contains a string name, string type, double lat, double long, and double bearing. I need to cherry pick just the lat/lon fields and construct an array of google.maps.LatLng – johnco3 Oct 29 '18 at 19:04
  • @FelixKling - well I guess its just an array then, sorry I am really new to JavaScript - I come from the C++side of things - I had to convert these objects from C++ QT objects to a JSON array suitable for transmission over a QWebChannel to connect to javascript - thats why I thought they might be a json array. – johnco3 Oct 29 '18 at 19:07
  • @FelixKling If I select the first entry in the array in the javascript console I get... bng: 0 lat:-37.0080 lng:174.7916 type:"Airport" wptid:"NZAA" __proto__:Object – johnco3 Oct 29 '18 at 19:13
  • 1
    Oh, it is an array of objects. It's just not *JSON*. [What is the difference between JSON and Object Literal Notation?](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation/2904181#2904181) – Felix Kling Oct 29 '18 at 19:55

1 Answers1

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;
});
rc_dz
  • 461
  • 4
  • 20