Best way to include packages like columnchart?

[AidanHibbard]

Trying to use ElevationService and visualization to chart elevation change and from google docs the specific graphics get brought in via packages. I've included the visualization library following the readme

libraries: 'places,drawing,visualization'

When I try to load the package before initializing the chart

window.google.load("visualization", "1", { packages: ["columnchart"] });

I get

TypeError: window.google.load is not a function

If I don't load in the package I get an error that visualization is undefined

let chart = new window.google.visualization.ColumnChart(document.getElementById('chart_div'));

Uncaught (in promise) TypeError: can't access property "ColumnChart", window.google.visualization is undefined

Does anyone have an example for this?

MainJS Config Vue.use(VueGoogleMaps, { load: { key: '', libraries: ['places', 'drawing', 'visualization', 'elevation'] } })

Code: ` import { MapElementFactory } from "vue2-google-maps";

export default MapElementFactory({ name: "directionsRenderer",

ctr() {
    return window.google.maps.DirectionsRenderer;
},

events: [],

mappedProps: {}, 

props: {
    origin: { type: Object },
    waypoints: { type: Array },
    destination: { type: Object },
    travelMode: { type: String }
},

afterCreate(directionsRenderer) {
    let directionsService = new window.google.maps.DirectionsService();
    let elevationService = new window.google.maps.ElevationService();
    const chart = new window.google.visualization.ColumnChart(document.getElementById('chart_div'));
    function computeDistance(response) {
        let total = 0;
        const route = response.routes[0]
        for (let i = 0; i < route.legs.length; i++) {
            total += route.legs[i].distance.value
        }
        total = (total / 1000) / 1.609;
        document.getElementById('total_distance').innerHTML = `${total.toString().substring(0, 4)} Miles`;
    }
    function plotElevation(results) {
        console.log(results)
        let elevations = results;

        var path = [];
        for (let i = 0; i < results.length; i++) {
            path.push(elevations[i].location);
        }
        var data = new window.google.visualization.DataTable();
        data.addColumn('string', 'Sample');
        data.addColumn('number', 'Elevation');
        for (let i = 0; i < results.length; i++) {
            data.addRow(['', elevations[i].elevation]);
        }

        document.getElementById('chart_div').style.display = 'block';
        chart.draw(data, {
            width: window.innerWidth,
            height: 200,
            legend: 'none',
            titleY: 'Elevation (m)',
            focusBorderColor: '#00ff00'
        });
    }
    this.$watch(
    () => [this.origin, this.waypoints, this.destination, this.travelMode],
    () => {
        let { origin, waypoints, destination, travelMode } = this;
        if (!origin || !destination || !travelMode) return;

        directionsService.route(
        {
            origin,
            waypoints,
            destination,
            travelMode
        },
        (response, status) => {
            if (status !== "OK") return;
            directionsRenderer.setDirections(response);
            computeDistance(response)
            elevationService.getElevationAlongPath({
                path: response.routes[0].overview_path,
                samples: 256
            }, plotElevation)
        }
        );
    }
    );
},

}); `

[AidanHibbard]

Ended up just using vue-google-charts