39 lines
1.1 KiB
Svelte
39 lines
1.1 KiB
Svelte
|
<script>
|
||
|
|
import PageTitle from '$/components/PageTitle.svelte';
|
||
|
|
import {Loader} from 'google-maps';
|
||
|
|
import { getMarcasParaderos } from '$/services/mapas';
|
||
|
|
|
||
|
|
const options = { language: 'es', region: 'CL' };
|
||
|
|
let my_map = null
|
||
|
|
|
||
|
|
$: start()
|
||
|
|
|
||
|
|
async function start() {
|
||
|
|
try {
|
||
|
|
const { api_key_google, zoom, center, marks } = await getMarcasParaderos()
|
||
|
|
const loader = new Loader(api_key_google, options);
|
||
|
|
const google = await loader.load();
|
||
|
|
const map = new google.maps.Map(my_map, { center, zoom });
|
||
|
|
|
||
|
|
for (const mark of marks) {
|
||
|
|
const { lat, lng, title } = mark;
|
||
|
|
new google.maps.Marker({
|
||
|
|
position: { lat, lng },
|
||
|
|
map,
|
||
|
|
title
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
alert(error)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<PageTitle>Paraderos</PageTitle>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<div bind:this={my_map} style="height: 500px"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|