Skip to content

Commit d3b08bf

Browse files
skyt-askyt-a
authored
Merge pull request #9 from skyt-a/add-doc-site
add doc site
2 parents 068e6f0 + 3cfb447 commit d3b08bf

File tree

42 files changed

+8410
-204
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+8410
-204
lines changed

‎.github/workflows/deploy.yml

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
jobs:
14+
build:
15+
runs-on: ubuntu-latest
16+
steps:
17+
- name: Checkout
18+
uses: actions/checkout@v4
19+
- name: Setup Node.js
20+
uses: actions/setup-node@v4
21+
with:
22+
node-version: "20"
23+
- name: Setup pnpm
24+
uses: pnpm/action-setup@v3
25+
with:
26+
version: 9
27+
- name: Install dependencies
28+
run: pnpm install
29+
- name: Build
30+
run: pnpm build
31+
- name: Setup Pages
32+
uses: actions/configure-pages@v5
33+
- name: Upload artifact
34+
uses: actions/upload-pages-artifact@v3
35+
with:
36+
path: ./dist
37+
38+
deploy:
39+
needs: build
40+
runs-on: ubuntu-latest
41+
environment:
42+
name: github-pages
43+
url: ${{ steps.deployment.outputs.page_url }}
44+
steps:
45+
- name: Deploy to GitHub Pages
46+
id: deployment
47+
uses: actions/deploy-pages@v4

‎.sveltepress/live-code/LiveCode0956e2a17fb.svelte

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<script lang="ts">
2+
import { APIProvider, GoogleMap, Marker } from 'svelte-google-maps-api';
3+
import { writable } from 'svelte/store';
4+
5+
let userApiKey = '';
6+
const mapOptions = {
7+
center: { lat: 35.6812362, lng: 139.7649361 },
8+
zoom: 12
9+
};
10+
11+
interface SimpleMarker {
12+
id: number;
13+
position: google.maps.LatLngLiteral;
14+
}
15+
16+
const markers = writable<SimpleMarker[]>([]);
17+
18+
function handleMapClick(event: google.maps.MapMouseEvent) {
19+
if (event.latLng && userApiKey) {
20+
const newMarker: SimpleMarker = {
21+
id: Date.now(),
22+
position: {
23+
lat: event.latLng.lat(),
24+
lng: event.latLng.lng()
25+
}
26+
};
27+
markers.update(currentMarkers => [...currentMarkers, newMarker]);
28+
}
29+
}
30+
31+
function clearMarkers() {
32+
markers.set([]);
33+
}
34+
</script>
35+
36+
<div style="margin-bottom: 1rem;">
37+
<label for="apiKeyClickToAdd">Enter your API Key:</label>
38+
<input id="apiKeyClickToAdd" type="text" bind:value={userApiKey} placeholder="YOUR_API_KEY" style="width: 300px; padding: 4px; margin-left: 5px;"/>
39+
</div>
40+
41+
<div style="height: 450px; width: 100%;">
42+
<div style="margin-bottom: 1rem;">
43+
<p>Click on the map to add markers. Current markers: {$markers.length}</p>
44+
<button onclick={clearMarkers} disabled={$markers.length === 0}>Clear All Markers</button>
45+
</div>
46+
47+
<div style="height: calc(100% - 90px); width: 100%; border: 1px solid #ccc;">
48+
{#if !userApiKey}
49+
<p style="text-align: center; padding: 2rem; color: #555;">Please enter your API key above to load the map.</p>
50+
{:else}
51+
{#key userApiKey}
52+
<APIProvider apiKey={userApiKey}>
53+
<GoogleMap
54+
id="click-to-add-markers"
55+
options={mapOptions}
56+
mapContainerStyle="width: 100%; height: 100%;"
57+
onClick={handleMapClick}
58+
>
59+
{#each $markers as marker (marker.id)}
60+
<Marker position={marker.position} />
61+
{/each}
62+
</GoogleMap>
63+
</APIProvider>
64+
{/key}
65+
{/if}
66+
</div>
67+
</div>

‎.sveltepress/live-code/LiveCode30956e2a17f.svelte

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script lang="ts">
2+
import { APIProvider, GoogleMap, Marker } from 'svelte-google-maps-api';
3+
import { writable } from 'svelte/store';
4+
5+
let userApiKey = '';
6+
const initialPosition = { lat: 35.6812362, lng: 139.7649361 };
7+
const mapOptions = {
8+
center: initialPosition,
9+
zoom: 12
10+
};
11+
12+
const markerPosition = writable(initialPosition);
13+
14+
function handleDragEnd(event: CustomEvent<google.maps.MapMouseEvent>) {
15+
if (event.detail.latLng) {
16+
markerPosition.set({
17+
lat: event.detail.latLng.lat(),
18+
lng: event.detail.latLng.lng()
19+
});
20+
}
21+
}
22+
</script>
23+
24+
<div style="margin-bottom: 1rem;">
25+
<label for="apiKeyDraggable">Enter your API Key:</label>
26+
<input id="apiKeyDraggable" type="text" bind:value={userApiKey} placeholder="YOUR_API_KEY" style="width: 300px; padding: 4px; margin-left: 5px;"/>
27+
</div>
28+
29+
<div style="height: 450px; width: 100%;">
30+
<p style="margin-bottom: 0.5rem; font-family: monospace;">
31+
Marker Position: {$markerPosition.lat.toFixed(6)}, {$markerPosition.lng.toFixed(6)}
32+
</p>
33+
<p style="margin-bottom: 1rem;">Drag the marker to update its position.</p>
34+
35+
<div style="height: calc(100% - 90px); width: 100%; border: 1px solid #ccc;">
36+
{#if !userApiKey}
37+
<p style="text-align: center; padding: 2rem; color: #555;">Please enter your API key above to load the map.</p>
38+
{:else}
39+
{#key userApiKey}
40+
<APIProvider apiKey={userApiKey}>
41+
<GoogleMap
42+
id="draggable-marker-map"
43+
options={mapOptions}
44+
mapContainerStyle="width: 100%; height: 100%;"
45+
>
46+
<Marker
47+
position={$markerPosition}
48+
options={{ draggable: true }}
49+
on:dragend={handleDragEnd}
50+
/>
51+
</GoogleMap>
52+
</APIProvider>
53+
{/key}
54+
{/if}
55+
</div>
56+
</div>

‎.sveltepress/live-code/LiveCode46a30956e2a.svelte

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script lang="ts">
2+
import { APIProvider, GoogleMap } from 'svelte-google-maps-api';
3+
4+
let userApiKey = '';
5+
const mapOptions = {
6+
center: { lat: 35.6812362, lng: 139.7649361 },
7+
zoom: 10
8+
};
9+
</script>
10+
11+
<div style="margin-bottom: 1rem;">
12+
<label for="apiKeyBasic">Enter your API Key:</label>
13+
<input id="apiKeyBasic" type="text" bind:value={userApiKey} placeholder="YOUR_API_KEY" style="width: 300px; padding: 4px; margin-left: 5px;"/>
14+
</div>
15+
16+
<div style="height: 400px; width: 100%; border: 1px solid #ccc;">
17+
{#if !userApiKey}
18+
<p style="text-align: center; padding: 2rem; color: #555;">Please enter your API key above to load the map.</p>
19+
{:else}
20+
{#key userApiKey}
21+
<APIProvider apiKey={userApiKey}>
22+
<GoogleMap
23+
id="basic-map"
24+
options={mapOptions}
25+
mapContainerStyle="width: 100%; height: 100%;"
26+
/>
27+
</APIProvider>
28+
{/key}
29+
{/if}
30+
</div>

‎.sveltepress/live-code/LiveCode6a30956e2a1.svelte

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script lang="ts">
2+
import { APIProvider, GoogleMap, Marker } from 'svelte-google-maps-api';
3+
4+
let userApiKey = '';
5+
const mapOptions = {
6+
center: { lat: 35.6812362, lng: 139.7649361 },
7+
zoom: 12
8+
};
9+
const position = { lat: 35.6812362, lng: 139.7649361 };
10+
</script>
11+
12+
<div style="margin-bottom: 1rem;">
13+
<label for="apiKeyMarker">Enter your API Key:</label>
14+
<input id="apiKeyMarker" type="text" bind:value={userApiKey} placeholder="YOUR_API_KEY" style="width: 300px; padding: 4px; margin-left: 5px;"/>
15+
</div>
16+
17+
<div style="height: 400px; width: 100%; border: 1px solid #ccc;">
18+
{#if !userApiKey}
19+
<p style="text-align: center; padding: 2rem; color: #555;">Please enter your API key above to load the map.</p>
20+
{:else}
21+
{#key userApiKey}
22+
<APIProvider apiKey={userApiKey}>
23+
<GoogleMap
24+
id="map-with-marker"
25+
options={mapOptions}
26+
mapContainerStyle="width: 100%; height: 100%;"
27+
>
28+
<Marker {position} />
29+
</GoogleMap>
30+
</APIProvider>
31+
{/key}
32+
{/if}
33+
</div>

‎.sveltepress/live-code/LiveCodea30956e2a17.svelte

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<script lang="ts">
2+
import { APIProvider, GoogleMap, Marker, InfoWindow } from 'svelte-google-maps-api';
3+
import { writable } from 'svelte/store';
4+
5+
let userApiKey = '';
6+
const mapOptions = {
7+
center: { lat: 35.6812362, lng: 139.7649361 },
8+
zoom: 11
9+
};
10+
11+
const locations = [
12+
{ id: 1, position: { lat: 35.6812362, lng: 139.7649361 }, title: 'Tokyo Station' },
13+
{ id: 2, position: { lat: 35.7100627, lng: 139.8107004 }, title: 'Tokyo Skytree' },
14+
{ id: 3, position: { lat: 35.6586414, lng: 139.7454329 }, title: 'Tokyo Tower' }
15+
];
16+
17+
const selectedMarkerId = writable<number | null>(null);
18+
let mapInstance: google.maps.Map | null = null;
19+
let markerInstances: { [key: number]: google.maps.Marker } = {};
20+
21+
function handleMarkerClick(locationId: number) {
22+
selectedMarkerId.set(locationId);
23+
}
24+
25+
function closeInfoWindow() {
26+
selectedMarkerId.set(null);
27+
}
28+
</script>
29+
30+
<div style="margin-bottom: 1rem;">
31+
<label for="apiKeyInteractive">Enter your API Key:</label>
32+
<input id="apiKeyInteractive" type="text" bind:value={userApiKey} placeholder="YOUR_API_KEY" style="width: 300px; padding: 4px; margin-left: 5px;"/>
33+
</div>
34+
35+
<div style="height: 450px; width: 100%; border: 1px solid #ccc;">
36+
{#if !userApiKey}
37+
<p style="text-align: center; padding: 2rem; color: #555;">Please enter your API key above to load the map.</p>
38+
{:else}
39+
{#key userApiKey}
40+
<APIProvider apiKey={userApiKey}>
41+
<GoogleMap
42+
bind:map={mapInstance}
43+
id="interactive-map"
44+
options={mapOptions}
45+
mapContainerStyle="width: 100%; height: 100%;"
46+
>
47+
{#each locations as location (location.id)}
48+
<Marker
49+
bind:marker={markerInstances[location.id]}
50+
position={location.position}
51+
title={location.title}
52+
onClick={() => handleMarkerClick(location.id)}
53+
/>
54+
{/each}
55+
56+
{#if $selectedMarkerId !== null}
57+
{@const selectedLocation = locations.find(l => l.id === $selectedMarkerId)}
58+
{#if selectedLocation && markerInstances[$selectedMarkerId]}
59+
<InfoWindow
60+
anchor={markerInstances[$selectedMarkerId]}
61+
options={{ pixelOffset: new google.maps.Size(0, -35) }}
62+
on:closeclick={closeInfoWindow}
63+
>
64+
<div>
65+
<strong>{selectedLocation.title}</strong>
66+
<p>Lat: {selectedLocation.position.lat.toFixed(6)}, Lng: {selectedLocation.position.lng.toFixed(6)}</p>
67+
</div>
68+
</InfoWindow>
69+
{/if}
70+
{/if}
71+
</GoogleMap>
72+
</APIProvider>
73+
{/key}
74+
{/if}
75+
</div>

‎.sveltepress/live-code/live-code-map.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"/Users/yutasakou/workspace/oss/svelte-google-maps-api/src/routes/examples/+page.md-6": "LiveCode46a30956e2a.svelte",
3+
"/Users/yutasakou/workspace/oss/svelte-google-maps-api/src/routes/examples/+page.md-9": "LiveCode6a30956e2a1.svelte",
4+
"/Users/yutasakou/workspace/oss/svelte-google-maps-api/src/routes/examples/+page.md-12": "LiveCodea30956e2a17.svelte",
5+
"/Users/yutasakou/workspace/oss/svelte-google-maps-api/src/routes/examples/+page.md-15": "LiveCode30956e2a17f.svelte",
6+
"/Users/yutasakou/workspace/oss/svelte-google-maps-api/src/routes/examples/+page.md-18": "LiveCode0956e2a17fb.svelte"
7+
}

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ Get your Google Maps API Key. Make sure the "Maps JavaScript API" is enabled for
5757

5858
## Documentation
5959

60-
For detailed documentation, component references, and examples, please visit the **[Documentation Website]([https://skyt-a.github.io/svelte-google-maps-api/docs](https://skyt-a.github.io/svelte-google-maps-api-docs/))**
60+
For detailed documentation, component references, and examples, please visit the **[Documentation Website]([https://skyt-a.github.io/svelte-google-maps-api/](https://skyt-a.github.io/svelte-google-maps-api/))**
6161

6262
## Components
6363

‎package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
"name": "svelte-google-maps-api",
33
"version": "0.1.3",
44
"scripts": {
5+
"dev": "vite dev",
6+
"build": "vite build",
57
"package": "svelte-package && publint",
68
"prepublishOnly": "npm run package",
79
"check": "svelte-check --tsconfig ./tsconfig.json",
@@ -127,10 +129,14 @@
127129
},
128130
"license": "MIT",
129131
"devDependencies": {
132+
"@sveltejs/adapter-static": "^3.0.1",
130133
"@sveltejs/kit": "^2.20.8",
131134
"@sveltejs/package": "^2.3.11",
132135
"@sveltejs/vite-plugin-svelte": "^4.0.4",
136+
"@sveltepress/theme-default": "^6.0.1",
137+
"@sveltepress/vite": "^1.2.1",
133138
"@types/google.maps": "^3.58.1",
139+
"@types/node": "^20.11.20",
134140
"@typescript-eslint/eslint-plugin": "^5.45.0",
135141
"@typescript-eslint/parser": "^5.45.0",
136142
"eslint": "^8.28.0",

0 commit comments

Comments
 (0)