Nuxt-Gmap displaying multiple infowindows

Does anyone know how to close an info window if a user clicks on another marker? In the Google documentation, you open infowindows manually, but in nuxt-gmap it's like this:

                 <GMap :key="mapRender"
                    ref="gMap"
                    language="en"
                    :center="{lat: 36.266114, lng: 29.413674}"
                    :options="{mapTypeControl: false, zoomControl:true, scrollwheel:true,
                    scaleControl:false, fullscreenControl:false, styles: mapStyle}"
                    :zoom="12"
                    >
                    <!-- :cluster="{options: {styles: clusterStyle}}" -->
                    <GMapMarker
                        v-for="location in locations" :key="location"
                    >
                        <GMapInfoWindow>
                        <code>
                            <div>
                                info
                            </div>
                        </code>
                        </GMapInfoWindow>
                    </GMapMarker>
                    <GMapCircle :options="circleOptions"/>
                </GMap>
javascriptvue.jsgoogle-mapsnuxt.js

Answer №1

Is nuxt-gmap considered true SSR? If not, an alternative option could be the use of vue2-google-maps

I've successfully integrated this package into my nuxt project and it functions seamlessly. Perhaps my implementation can offer a fresh perspective.

<GmapMap
  :center="{lat: xx.xxx, lng: xxx.xxx}"
  :zoom="13"
  map-type-id="terrain"
  style="width: 100%; height: 870px;"
>
  <GmapMarker
    :key="i"
    v-for="(branch, i) in branches"
    :position="{lat: branch.lat, lng: branch.lng}"
    clickable
    @click="selectedBranch = branch"
  />
  <gmap-info-window
    :position="selectedBranchPosition"
    :opened="!!selectedBranch.id"
    @closeclick="selectedBranch = {}"
  >
    {{ selectedBranch }}
  </gmap-info-window>
</GmapMap>


  data() {
    return {
      selectedBranch: {},
      branches: [],
    };
  },
  computed: {
    selectedBranchPosition() {
      if (!this.selectedBranch.id) { return null; }
      return { lat: this.selectedBranch.lat, lng: this.selectedBranch.lng };
    },
  }

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

Retrieve the content of the specified element within the webpage

How can I modify the method to successfully retrieve the text content of an element on a webpage using Selenium with JavaScript? Currently, it is returning undefined. homepage.js const { Builder, By, Key, until } = require('selenium-webdriver'); ...

javascriptselenium-webdriverxpathselenium-chromedrivergettext

Tips for incorporating several form input outputs into an array State in React

I am an aspiring coder diving into the world of React by working on a simple app that helps calculate how much money one has, designed for my kids to use and learn from. The app consists of 5 components, each with its own input field. These fields allow us ...

javascriptarraysreactjs

What steps are necessary to instruct multer to store the file in a specific directory?

Having some issues with multer while trying to save an image in a specific folder. The path for the file gets uploaded to mlab successfully, but the problem arises when attempting to retrieve the image from the designated folder as it fails to save there ...

javascriptnode.jsfilefile-uploadmulter

Jquery Banner Fade In animation malfunctioning

I am facing an issue with my banner on various browsers, especially IE 7,8, and possibly 9. When the fade-in effect is applied at the bottom of the banner, the shadows underneath turn black. Is there anyone who can help me resolve this issue? Website: ww ...

javascriptjquery

Update the multidimensional array function to ES6 syntax

I'm in the process of developing a function for my app and I'm curious if there's a more elegant way to implement it using ES6, without relying on two for loops. The goal is to create a multi-dimensional array that keeps track of x and y co ...

javascriptarraysfunctionmultidimensional-arrayecmascript-6

What is the best way to handle AJAX responses in an onchange event

I'm working on a form where the select option in the input (jurusan) is automatically filled based on the selected value. I need to know how to change the value that appears after selecting an option. For example, if I select option A, it displays th ...

javascriptjqueryajax

Attempting to save data to a .txt file using PHP and making an AJAX POST request

I have been facing an issue while trying to save a dynamically created string based on user interaction in my web app. It's just a simple string without anything special. I am using ajax to send this string to the server, and although it reaches the f ...

javascriptphpjqueryajax

Obtain the data from a different HTML element

When a user clicks on a button, I want to send the value of an input element in Angular2. What would be the most effective approach for achieving this? <input type="text" class="form-control" placeholder="Search for images..." /> <span class="i ...

javascripthtmlangular

How can you ensure that the object passed to a component becomes reactive in Vue?

Unique Codepen Demo In my component, I am working with a location object passed as a props. Specifically, the argument I used is locations[index], which represents a selected item from an array of locations. The issue I'm facing is that the componen ...

vue.jsvuejs2vue-component

The animation function in A-frame causes entities to vanish when used with D3.js

Working with the animation property in D3.js has been a bit of a challenge for me. When I include the a-animation directly in the HTML section, everything works as expected. <a-box id="box" position="0 1 0" rotation="0 0 0" scale="1 1 1" color="#4CC3D9 ...

javascripthtmlanimationd3.jsaframe

Prevent Dehydration issue while using context values in Next Js

Every time I log in with a user, update a context value, and re-render some components, I keep encountering a Hydration error in Next Js. The issue seems to be specifically with my NavBar component which is rendered using react-bootstrap. The code snippet ...

javascriptreactjsnext.jsreact-bootstrap

Combine the values of two text fields from separate input fields to populate a new text field across several lines

https://i.sstatic.net/fp8aZ.png I am seeking a way to automatically calculate the total cost by multiplying the quantity and unit cost values for each line entered. Despite my attempts with the jQuery script provided below, I have been unable to achieve t ...

javascriptjquery

How to Retrieve Checkbox Values from Multiple Rows Using JavaScript

I have a variety of module rows that allow users to manage access rights by selecting specific options. My goal now is to extract the checked boxes from these checkboxes with the name "config{{$field->id}}". Below is the current functioning code. HTM ...

javascripthtml

What is the best way to hide the div when scrolling to the top?

Is there a way to hide the circle once it's scrolled to the top? Currently, I can scroll the circle to the top but it remains visible. Upon further exploration, I found that clicking on the circle scrolls it to the top and then on a second click, it f ...

javascriptcss

Executing Array.prototype.filter() results in an empty array being returned

I have a list of jQuery elements that I collected using the .siblings() method, and now I am trying to filter them. Here is the HTML code: <div> <div> <label for="username">Username</label> <input class="form ...

javascriptjqueryhtml

Using Google Maps within a Bootstrap modal window that is only partially loaded

The maps display perfectly fine in a regular div, but when placed inside a Bootstrap modal, only half or part of the map is visible. However, when I open the console, the issue resolves itself and the entire map is shown. Photo without console opened Pho ...

htmlcssgoogle-mapstwitter-bootstrap

What could be causing my selenium tests to fail on travis-ci even though there have been no code changes, when they are passing successfully

I'm facing a tough challenge trying to troubleshoot a selenium test that passes when run locally but not on travis. Reviewing the travis build logs, I noticed that the test was passing in build #311 but started failing at build #312. It seems like th ...

javascriptpythondjangoseleniumtravis-ci

Create a series of canvas lines connecting all divs that share a common class identifier

Currently, I am in the process of creating a document that will establish a tree-type graph based on user input. My goal is to link styled divs with canvas lines to show their connection to the parent div. I have been utilizing .getBoundingClientRect() to ...

javascripthtmlhtml5-canvas

Steps for deactivating AMD on four files and sequentially loading them using webpack

I am facing an issue where I need to disable AMD on 4 files and ensure that video.js is loaded before the other 3 files, as they are dependent on it. My attempt to achieve this in webpack.config.js was unsuccessful: const path = require('path') ...

javascriptreactjswebpackrequirejsamd

What is the proper way to include 'rowspan' specific CSS within an HTML table?

I have an HTML table with rowspans in it: table tr, td { border: 1px solid black; } tr:nth-child(1) { background-color: red; } tr:nth-child(2) { background-color: blue; } <table> <tr> <td rowspan=2>Section 1</td> ...

javascripthtmlcss