<div style="width:100%;height:20em;">
    @php
        $location = [];
        $location[] = (object)[ 'name' => 'Birmingham',
                        'latitude'  => 52.4862,
                        'longitude' => -1.8904
                        ];
        $location[] = (object)[ 'name' => 'Cardiff',
                        'latitude'  => 51.4837,
                        'longitude' => -3.1681,
                      ];
        $location[] = (object)[ 'name' => 'Smethwick',
                        'latitude'  => 52.4924,
                        'longitude' => -1.9652,
                        'html' => 'Smethwick<br />West Midlands'
                      ];
        
    @endphp
    <style>
        div[data-role=map-popup]
        {
            display:none;
            z-index:99;
            position:relative;
            top:calc( -90% ); 
            left:1em;
            min-width:5em;
            max-width:20em;
            width:auto;
            height:auto;
            padding:1em;
            background-color: navy;
            color:white;
            border-radius: 0.75em;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }
    </style>
    <x-bs-maps.google-locations 
        style="width:100%;height:100%;"
        id=''           {{-- random if not supplied --}}
        instanceUid=""  {{-- random suffix - auto generated if not provided --}}
        {{-- :dataRole=$dataRole  autogenerated if you supply a locations array of objects --}}
        :locations=$location      {{-- optional if you already have the data in elements on the page that can be matched with data-role --}}
        mapsApiKey="AIzaSyAOsDrtcuXqC_CQDp3ZYNDcSiQD_wobTIs"   {{-- AIzaSyAOsDrtcuXqC_CQDp3ZYNDcSiQD_wobTIs --}}
        includeDefaultCSS="0"
    />
</div>