How to display Google maps using vuejs

Question

How to display google map using vuejs. I tried but not displaying and I consoled there is no errors in console , I have given code below .I need to display map in that div tag.

<template>
  <va-card type="plain"  >
    <div id="map" >
    </div>
  </va-card>
</template>

below is my script

mounted() {
  let myLatlng = new window.google.maps.LatLng(12.9716 , 77.5946);
  let mapOptions = {
    zoom:14,
    center: myLatlng,
    scrollwheel: true, 
  }; 
  let map = new window.google.maps.Map(
    document.getElementById("map"),
    mapOptions
  );

  let marker = new window.google.maps.Marker({
    position: myLatlng,
    title:  "Banglore" 
  });
  marker.setMap(map);
},

tony19 · Accepted Answer · 2022-07-16 00:18:49Z

1

Try using $refs instead of getElementById Accessing child components and elements in Vue

<template>
  <va-card type="plain"  >
      <div ref="map"></div>
  </va-card>
</template>


mounted() {
    ....
    let map = new window.google.maps.Map(
        this.$refs.map,
        mapOptions
    );
    ...
}

edited Jul 16, 2022 at 0:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 13, 2019 at 9:33

Tnc Andrei

1,11210 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

How to display Google maps using vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related