0

estoy utilizando Blazor de .NET, necesito mostrar el mapa de google maps pero no soy capaz, pero si actualizo la página, este se me muestra, que puedo hacer para que pueda entrar y me aparezca sin problema? LLevo toda la mañana intento solucionarlo y no doy capaz, lo puse mediante un iframe y tampoco fue, en archivos separados pasándole valores a la función y tampoco ocurrió, estoy sin ideas actualmente, gracias por la ayuda <3

El Script

<script>
    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "API", v: "weekly"});
</script>
<script >
    let map;

    async function initMap() {
        const position = { 
            lat: @Movimiento.Lat.ToString(System.Globalization.CultureInfo.InvariantCulture), 
            lng: @Movimiento.Lon.ToString(System.Globalization.CultureInfo.InvariantCulture)
        };
        const { Map } = await google.maps.importLibrary("maps");
        const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

        map = new Map(document.getElementById("map"), {
            zoom: 20,
            center: position,
            mapId: "DEMO_MAP_ID",
            mapTypeId: 'satellite'
        });


        const marker = new AdvancedMarkerElement({
            map: map,
            position: position,
            title: "Uluru",
        });
    }

    initMap();
</script>

El HTML

<div id="map" class="mb-4" style="height: 600px; width: 100%;"></div>

Y unas funciones que tengo para llamar a la base de datos que recogen la posición

@code {
    [Parameter]
    public int id { get; set; }
    Datos.Entidades.= new Datos.Entidades();
    Datos.Entidades.= new Datos.Entidades();

    protected override async Task OnInitializedAsync() {
        await getInfo();
        await getPos();
    }

    private async Task getInfo() {
        var respuesta = await http.GetAsync($"{Data.GlobalService.uri}/url={id}");
        var rest = await respuesta.Content.ReadAsStringAsync();
        try {
            Info = JsonConvert.DeserializeObject<Datos.Entidades>(rest);
        } catch (Exception ex) {
            Console.WriteLine("falle " + ex);
        }
    }

    private async Task getPos() {
        var respuesta = await http.GetAsync($"{Data.GlobalService.uri}/url={id}");
        var rest = await respuesta.Content.ReadAsStringAsync();
        try {
            Movimiento = JsonConvert.DeserializeObject<Datos.Entidades>(rest);
        } catch (Exception ex) {
            Console.WriteLine("falle " + ex);
        }
    }
}
3
  • En el OnInitializedAsync al final, agrega StateHasChanged();
    – Yussef
    Commented el 12 nov. a las 22:44
  • @Yussef gracias por tu comentario pero el problema persiste, intentaré a lo largo de esta mañana solucionarlo, si tiene alguna otra idea la probaré encantado, gracias!
    – IgleDev
    Commented el 13 nov. a las 8:48
  • Investigando descubrí que ninguna página nada más iniciarla me carga el contenido de una etiqueta script, siempre tengo que actualizar la página para que este script se ejecute.
    – IgleDev
    Commented el 13 nov. a las 9:23

1 respuesta 1

1

La solución era simple, tuve que ir al HTML que me redireccionaba a la página de detalles y poner lo siguiente:

 <td><NavLink href="@("/Detalles/info/"+ info.Id)" class="btn btn-outline-success fs-4 fw-bold" onclick="location.href=this.href; return true;">Detalles</NavLink></td>

El onclick era el causante de que no hiciera el evento onload en la página nada más ir a ella. Gracias por vuestras sugerencias!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.