Vite Svelte Google Map

fagoner

vite-svelte-google-map

Download

Vite + Svelte + Google Map

The following example it's a simple example to use google maps api with Svelte

Create google cloud project, and enable the api

The project requires to have an Google Cloud Project, and activate the Maps Javascript Api

To create a Google Cloud Project and enable the Maps JavaScript API, follow these steps:

Go to the Google Cloud Console and sign in with your Google account.
Click on the project drop-down and select "New Project".
Enter a name for your project and click on "Create".
Once your project is created, click on the navigation menu and select "APIs & Services" > "Library".
In the search bar, type "Maps JavaScript API" and click on the result.
Click on the "Enable" button to enable the API for your project.
You may need to set up billing for your project in order to use the Maps JavaScript API. Follow the prompts to set up billing if necessary.

Once you have completed these steps, you will have created a Google Cloud Project and enabled the Maps JavaScript API for your project.

Get the API key

To get the API key for your project, follow these steps:

Go to the Google Cloud Console and sign in with your Google account.
Select your project from the project drop-down menu.
In the navigation menu, click on "APIs & Services" > "Credentials".
Click on the "Create credentials" button and select "API key".
Your API key will be generated. Make sure to copy and securely store it.
You can now use this API key in your project to access the Google Maps API.

Install dependencies

Go the root folder of the project and execute

npm install

The main package to use is @googlemaps/js-api-loader

Set the API on the project

Open src/App.svelte and to the line #8

    const loader = new Loader({
        apiKey: '<<Your api key>>',
        version: 'weekly'
    });

And set your API key in the key apiKey

If you want to set the coordinate, set the values on the key center

    onMount(async () => {
        const { Map } = await loader.importLibrary('maps');
        map = new Map(mapContainer, {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
    });

Run the project

npm run dev

References

Top categories