#Introduction

In this lab you'll add the Google map.

#Steps

??Add the import

    import GoogleMapsComponent from '../../../node_modules/neo.mjs/src/component/wrapper/GoogleMaps.mjs';

Save and refresh to make sure the import is working.

??Add the map to the main view

Add a second item to the main container's `items[]`

    {
        module: GoogleMapsComponent,
        flex: 1,
        center: {
            lat: 64.8014187,
            lng: -18.3096357
        },
        zoom: 6,
    }

??Bind the store

The map component has a `markerStore` config. Add the code to bind that to
the store. This will be very similar to what you did for the table. 

??Solution &mdash; don't peek

Here's the code, in case you need it.

<pre style="border: thin solid gray; padding: 8px; ">
import Viewport from '../../../node_modules/neo.mjs/src/container/Viewport.mjs';
import EarthquakesTable from './earthquakes/Table.mjs';
import ViewModel from './MainContainerViewModel.mjs';
import GoogleMapsComponent from '../../../../node_modules/neo.mjs/src/component/wrapper/GoogleMaps.mjs';

class MainContainer extends Viewport {
    static getConfig() {
        return {
            className: 'Earthquakes.view.MainContainer',
            layout: { ntype: 'vbox', align: 'stretch' },
            autoMount: true,
            model: {
                module: ViewModel,
            },
            items: [{
                module: EarthquakesTable,
                flex: 1,
                bind: {
                    store: 'stores.earthquakes'
                }
            }, {
                module: GoogleMapsComponent,
                flex: 1,
                center: {
                    lat: 64.8014187,
                    lng: -18.3096357
                },
                zoom: 6,
            }],
        }
    }
}

Neo.setupClass(MainContainer);

export default MainContainer;
</pre>

