Kakao map web API for Blazor
https://apis.map.kakao.com/web/guide/
_Host.cshtml
(blazor server api)
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={MY_API_KEY}"></script>
In *.razor
file
@using KakaoMapBlazor
@using KakaoMapBlazor.Map
@using KakaoMapBlazor.Models
@using KakaoMapBlazor.Enums
@using KakaoMapBlazor.Marker
<KakaoMapComponent
CreateOption="mapCreateOption"
OnMapCreated="OnMapCreated"
Style="width: 500px; height: 400px;">
</KakaoMapComponent>
@code {
[Inject]
private IJSRuntime JS { get; set; }
IKakaoMap KakaoMap;
MapCreateOption mapCreateOption = new MapCreateOption(new LatLng(33.450701, 126.570667))
{
MapTypeId = MapType.RoadMap,
Level = 4,
};
protected void OnMapCreated(IKakaoMap map)
{
KakaoMap = map;
KakaoMap.Click += async (s, e) =>
{
await JS.InvokeVoidAsync("console.log", "OnClick", e);
};
KakaoMap.Click += async (s, e) =>
{
var position = e.LatLng;
var marker = await KakaoMap.CreateMarker(new MarkerCreateOptionInMap
{
Position = position,
});
marker.Click += async (s, _) =>
{
await JS.InvokeVoidAsync("console.log", "marker clicked");
};
};
}
}