Vue.js GoogleMaps API with @googlemaps/js-api-loader

Question

Thanks for reading my question :)

I'm trying to implement GoogleMaps in my Vue.js project and using the @googlemaps/js-api-loader (from https://developers.google.com/maps/documentation/javascript/overview#javascript)

My Code looks as follows:

<script setup>
import { onMounted, ref } from 'vue'
import { Loader } from '@googlemaps/js-api-loader'

const loader = new Loader({
  apiKey: '',
  version: 'weekly',
  libraries: ['places']
})

const map = ref([])

onMounted(async () => {
  await loader
    .load()
    .then(google => {
      map.value = google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      })
    })
    .catch(error => {
      console.log(error)
    })
    .then(function () {
    // always executed
    })
})
</script>

<template>
  <div
    id="map"
    class="map"
  />
</template>

<style>
  html,
  body,
  #map {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

But the map isn't showing, only that pop-up window, that the map can't load properly. In the console this error occurs: typeError: this.set is not a function. (In 'this.set("renderingType","UNINITIALIZED")', 'this.set' is undefined) Does anyone know how to get it running (at best in the <script setup>)?

Tom · Accepted Answer · 2022-02-23 01:09:57Z

2

Try to add new like this :

map.value = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      })

edited Feb 23, 2022 at 1:09

answered Feb 23, 2022 at 1:03

Tom

363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Taraman Over a year ago

Thank you so much! I thought I tried this already but obviously somehow different.

sergioriverafl · Accepted Answer · 2022-08-12 17:33:42Z

1

You must specify the width and height in the div with the id map

<template>
  <div class="map" id="map" style="width: 300px;height: 200px;" ></div>
</template>

answered Aug 12, 2022 at 17:33

sergioriverafl

3031 gold badge4 silver badges6 bronze badges

Comments

Lee Taylor · Accepted Answer · 2022-06-23 21:24:33Z

0

try this too if it didn't work:

map.value = new window.google.maps.Map(document.getElementById('map'), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8
});

edited Jun 23, 2022 at 21:24

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered Jun 20, 2022 at 4:02

Alex Kurniawan

1

1 Comment

Lee Taylor Over a year ago

Please don't use code snippets for code that won't run.

Shuvo · Accepted Answer · 2024-11-20 11:51:57Z

0

You can try like below after installing @googlemaps/js-api-loader

package in your vuejs app .

  <template>
     <div id="map"></div>
   </template>

  <script setup>
    import { Loader } from "@googlemaps/js-api-loader";

    const {Map} = await loader.importLibrary("maps");

     onMounted(()=>{

        const map = new Map(document.getElementById("map"), {
            zoom: 4,
           center: { lat: -25.344, lng: 131.031 },
          });

    })
 </script>

answered Nov 20, 2024 at 11:51

Shuvo

2052 silver badges7 bronze badges

Collectives™ on Stack Overflow

Vue.js GoogleMaps API with @googlemaps/js-api-loader

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related