Pyro2817
Explore posts from serversUsing JavaScript with Blazor
Map.razor
@inherits ComponentBase
@inject IJSRuntime JS
@implements IAsyncDisposable
<div @ref=@mapElement style="width: 900px; height: 818px;"></div>
@code {
private IJSObjectReference? module;
private ElementReference mapElement;
private bool apiLoaded = false;
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
if (module is null) {
string path = "./js/maps.js";
module = await JS.InvokeAsync<IJSObjectReference>("import", path);
}
if (!apiLoaded) {
await module.InvokeVoidAsync("JSMaps.loadApiScript", Environment.GetEnvironmentVariable("MAPS_JS_MAP_API_KEY"));
apiLoaded = true;
}
var mapOptions = new {...};
var markerOptions = new {...};
await module.InvokeVoidAsync("JSMaps.initMap", mapElement, mapOptions, markerOptions);
}
}
public async ValueTask DisposeAsync() {
if (module is not null) {
await module.DisposeAsync();
}
}
}
@inherits ComponentBase
@inject IJSRuntime JS
@implements IAsyncDisposable
<div @ref=@mapElement style="width: 900px; height: 818px;"></div>
@code {
private IJSObjectReference? module;
private ElementReference mapElement;
private bool apiLoaded = false;
protected override async Task OnAfterRenderAsync(bool firstRender) {
if (firstRender) {
if (module is null) {
string path = "./js/maps.js";
module = await JS.InvokeAsync<IJSObjectReference>("import", path);
}
if (!apiLoaded) {
await module.InvokeVoidAsync("JSMaps.loadApiScript", Environment.GetEnvironmentVariable("MAPS_JS_MAP_API_KEY"));
apiLoaded = true;
}
var mapOptions = new {...};
var markerOptions = new {...};
await module.InvokeVoidAsync("JSMaps.initMap", mapElement, mapOptions, markerOptions);
}
}
public async ValueTask DisposeAsync() {
if (module is not null) {
await module.DisposeAsync();
}
}
}
7 replies
Using JavaScript with Blazor
App.razor
@using static RouteMancer.Components.Routes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="app.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
</head>
<body class="bg-gray-300">
<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
<script src="./_content/RouteMancer/js/maps.js" defer></script> <---------- the file
<script src="_framework/blazor.web.js"></script>
</body>
</html>
@using static RouteMancer.Components.Routes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="app.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet @rendermode="new InteractiveServerRenderMode(prerender: false)" />
</head>
<body class="bg-gray-300">
<Routes @rendermode="new InteractiveServerRenderMode(prerender: false)" />
<script src="./_content/RouteMancer/js/maps.js" defer></script> <---------- the file
<script src="_framework/blazor.web.js"></script>
</body>
</html>
7 replies
Using JavaScript with Blazor
wwwroot/js/maps.js
window.JSMaps = window.JSMaps || (function () {
let initialized = false;
const mapObjects = {};
async function loadApiScript(key, version) {
if (initialized) {
return;
}
(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: key,
v: version,
});
initialized = true;
}
async function initMap(elementId, mapOptions, markerOptions) {
...
}
return {
loadApiScript,
initMap
};
})();
window.JSMaps = window.JSMaps || (function () {
let initialized = false;
const mapObjects = {};
async function loadApiScript(key, version) {
if (initialized) {
return;
}
(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: key,
v: version,
});
initialized = true;
}
async function initMap(elementId, mapOptions, markerOptions) {
...
}
return {
loadApiScript,
initMap
};
})();
7 replies