CODEWITHSUNDEEP
javascriptapigoogle-mapsvue.js
pavan kp
pavan kp

Reputation: 69

How to display Google maps using vuejs

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);
},

Upvotes: 1

Views: 840

Answers (1)

Tnc Andrei
Tnc Andrei

Reputation: 1012

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
    );
    ...
}

Upvotes: 1

Related Questions