// We need this for easy update of the markers array
import { updateArray } from 'cx/data';
...
class Controller extends CxController {
    ...
    onInit() {
        this.store.init('$page.mapdefaults', this.getDefaults());        
        this.store.init('$page.map', this.getDefaults());   
        this.store.init('$page.markers', Array.from(new Array(5))
            .map((a, i) => ({
                id: i,
                position: {
                    lat: 41.77811360 + Math.random() - 0.5,
                    lng: -87.62979820 + Math.random() - 0.5,
                },
                title: `This is marker ${i}`,
                popup: true,
                heading: 360 * Math.random()
            })));
    }

    togglePopup(e, {store}) {
        var id = store.get('$record.id');
        store.update('$page.markers', updateArray, m => ({
            ...m,
            popup: !m.popup
        }), m => m.id === id); // The last parameter is the filter
    }
}

export default <cx>
    <GoogleMap
        controller={Controller}
        ...
    >
        <Repeater 
            records-bind="$page.markers"
            keyField="id">
            <Marker
                position-bind="$record.position"
                onClick="togglePopup"
            >
                <InfoWindow
                    if-bind="$record.popup"
                    onCloseClick="togglePopup"
                >
                    <div text-bind="$record.title"></div>
                </InfoWindow>
            </Marker>
        </Repeater>
    </GoogleMap>
</cx>;