Guide for incorporating Google maps into a Vue.js application

Can anyone help me with displaying a Google map using Vue.js? I've tried but it's not showing up, and there are no errors in the console. Below is the code I'm using, and I need to display the map within that specific 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);
},

Answer №1

Consider utilizing $refs over getElementById for accessing child components and elements in Vue. Check out this resource for more information: 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
    );
    ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Acquiring a snippet of JSON data from a Python response

As a newcomer to the world of programming, I am currently working on using an API to automate various tasks. While I have successfully managed to get a response from the API, my focus is specifically on extracting just two values - the host and port. Bel ...

Combining Two Objects in Laravel and Vue.js: A Step-by-Step Guide

Currently, I am in the process of developing a basic CRUD App using Laravel along with Vue.JS (including Vuex). However, I have encountered a small issue. The problem lies within the 'categories' table, the structure of which is visible in the pr ...

Error encountered while compiling ./node_modules/@material-ui/core/ButtonBase/ButtonBase.js

I've encountered a frustrating error message: Failed to compile ./node_modules/@material-ui/core/ButtonBase/ButtonBase.js Module not found: Can't resolve '@babel/runtime/helpers/builtin/assertThisInitialized' in 'E:\IT&bsol ...

Learn how to separate strings within an object and add them to an array with JavaScript!

When I receive an object, the quantity of strings differs each time and varies. Object { key_id: 7, key1: "String1, String2", key2: "String1, String2, String3", key3: "String1, String2", key4: "String1, String2"; … } I am lo ...

Incorporate dots into every slide using the React Slick slider

When implementing a slider in React.js, I use React Slick. The API provided by React Slick allows us to easily incorporate previous and next buttons on each slide using the Previous and Next methods. However, I am curious about how to achieve the same fun ...

Navigating through an array of functions, some of which may return promises while others do not

Is there a way to efficiently iterate and execute an array of functions where some return promises, requiring the use of await, while most do not return promises, necessitating them to be set as async? for (let i = 0; i < this.steps.length; i++) { ...

Incorporating TypeScript into a project originally developed in JavaScript

I'm considering using TypeScript to write code for a JavaScript project. I've come to appreciate the benefits of TypeScript and am especially interested in using it for our AngularJS 1.5 project, which we plan to migrate soon. As I'm new to ...

Obtain Outcome from a Nested Function in Node.js

I'm grappling with the concept of manipulating the stack in JS and hoping this exercise will provide some clarity. Currently, I'm attempting to create a function that makes a SOAP XML call, parses the data, and returns it when called. While I c ...

Posts that are repeated when making an AJAX call in WordPress

I have been experimenting with implementing a 'load more' button feature in my WordPress site. The concept is simple - users click the button, and additional posts are loaded using AJAX without the need for page reload or pagination. Following a ...

Developing desktop applications using C# scripting

I currently have a C# desktop program that is able to work with new C# plugins. My goal is to modify the existing C# application to allow for scripts to be used as plugins. These scripts could be in JavaScript, Windows Script Host (WSh), or any other form ...

Achieving a reset for a form is essential for ensuring its

After creating a contact form, I encountered an issue where if a field is left empty or an invalid email address is entered, the form stops sending. Even after attempting to resend the information, the form remains unresponsive. Any suggestions on how to r ...

execute the command only if all ava tests succeed

I'm working on creating an npm script that will execute Ava, and if it is successful, will then run another deploy command. Is there a way to obtain the result of an Ava test in JavaScript, or to save it to a file or pass it to a subsequent command? ...

Node.js server allows for accessing AJAX requests seamlessly

I need to send a parsed AST of JavaScript code to a server for processing, and then receive a list of completions back. However, when I log the AST to the client console before sending it, the structure appears like this: [ { "id":0, "type":"Program", "ch ...

Symfony's DataTables is encountering an issue with the JSON response, showing

I have encountered an issue while trying to fetch data from a response within my template table (using DataTables). The error message I receive is as follows: DataTables warning: table id=example - Invalid JSON response. For more information about this ...

including a collection of values into a JSON data structure

Currently, I am iterating through some JSON data (grouped tweets from Twitter) to tally the frequency of specific keywords (hashtags) in order to generate an organized list of common terms. this (19) that (9) hat (3) I have achieved this by initial ...

What is the method for moving one div above or below another div using the scroll bar?

Here's the scenario I'm facing: I have rows with buttons that, when clicked, reveal a set of options. The challenge is that depending on where the row is located on the page, the settings need to open either above or below the button. When the b ...

Issue with Component: Data is not being injected into controller from ui-router resolve, resulting in undefined data

Encountering an issue with resolve when using a component and ui-router: the data returned after resolving the promise is displaying as "undefined" in the controller. Service: class userService { constructor ($http, ConfigService, authService) { th ...

Necessitating derived classes to implement methods without making them publicly accessible

I am currently working with the following interface: import * as Bluebird from "bluebird"; import { Article } from '../../Domain/Article/Article'; export interface ITextParsingService { parsedArticle : Article; getText(uri : string) : B ...

Internet Explorer 11 and the process of URL encoding

Hello there! I am currently working on an MVC project with Angular where I am utilizing a JsonResult to return JSON data from a list containing emails with a specific date. Below is the AJAX call I'm making from Angular: myApp.service('mailServ ...

Difficulty with SailsJS Transmitting Information to View Template

I've been trying to establish a connection for hours but haven't had any luck. All I want to do is transfer some data from a controller to a view template. When I navigate the route without specifying a view template, the browser displays the da ...