google maps iframe is above everything

i can change the z-index of the map but it will still going above my modal but idk why if anyone know what i need to change ill take it.

<ContentSection title="Localisation">
              <div
                id="gmaps-iframe"
                class="w-full relative z-0"
                style="height: 450px"
                phx-hook="GMaps"
                data-lat={@lat}
                data-lng={@lng}
              />
            </ContentSection>
function initMap(context) {
  return () => {
    const lat = parseFloat(context.el.dataset.lat);
    const lng = parseFloat(context.el.dataset.lng);
    const center = { lat: lat, lng: lng };

    var map = new google.maps.Map(context.el, {
      center: center,
      zoom: 18,
    });

    var cityCircle = new google.maps.Circle({
      strokeColor: "#fe7d56",
      strokeWeight: 2,
      fillColor: "#ffcbbb",
      map: map,
      center: center,
      radius: 50,
    });
  };
}