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);
}
}
}
OnInitializedAsync
al final, agregaStateHasChanged();
script
, siempre tengo que actualizar la página para que este script se ejecute.