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 component instance from a Vue watcher

I'm currently developing a project that acts as a bill manager and I am looking to have the subtotal recalculated automatically whenever the quantity or unit value changes. I've tried using watchers and computed properties to achieve this but hav ...

vue.jsvuejs2watchcomputed-properties

Adjust the field of view of the camera in ThreeJS

I'm currently working on adjusting the field of vision for a camera without having to create a new one. So far, I've successfully achieved this for the position using the following code: camera.position.set() Now, I'd like to implement a s ...

javascriptthree.js

What is the best method to include the product name in the URL of my Vue.JS application using Vue Router?

I am looking to dynamically insert the product name in the URL. Currently, it appears as "http://localhost:8080/product/?ID=1". I would like it to display as "http://localhost:8080/product/Iphone-11-Pro?ID=1" Below is the router-link code found in the ...

vue.jsvue-router

Troubleshooting: Issue with Chrome's CSV Export Functionality in JavaScript/AngularJS

Currently, I am troubleshooting an issue with exporting a CSV file from a data table on a web application. The export functionality works fine on all browsers except for Chrome when the export button is clicked. I have been trying to solve this problem for ...

javascriptangularjsgoogle-chromeecmascript-6export-to-csv

Setting up webpack for React to utilize multiple entry points and outputs

Having some trouble configuring the server to handle multiple entries and outputs. The application utilizes Zurb Foundation, jQuery, and React. I'm aiming to exclude jQuery and foundation from the bundle.js file, while also creating a separate bundle ...

javascriptjqueryreactjswebpackbabeljs

Prevent scrolling on browser resize event

I am working on a basic script that adds a fixed class to a specific div (.filter-target) when the user scrolls beyond a certain point on the page. However, I am wondering how I can prevent the scroll event from triggering if the user resizes their brows ...

javascriptjquerywindow-resize

Strategies for temporarily storing values within md-list-item in AngularJS

I am attempting to populate a list with items using material icons. The issue is that the values are being added permanently when the material icon is clicked, disregarding the save and discard buttons at the bottom of the card. My goal is to add values te ...

javascriptcssangularjshtml

Utilizing AngularJS: Transforming JSONP information into HTML

I'm relatively new to utilizing $http and fetching data from various websites. My main query is, how can I convert JSONP into HTML? Specifically, when using $http to request the Atari Wikipedia page, the content is displayed with and HTML elements. ...

javascriptangularjs

Ways to avoid data looping in jQuery Ajax requests

This is in relation to the assignment of multiple users using the Select2 plugin, Ajax, and API. The situation involves a function that contains 2 Ajax calls with different URLs. Currently, there are pre-selected users stored in the database. The selection ...

javascriptjqueryhtmlajaxjquery-select2

What is the best way to save the data received from createApi into the Redux store?

Currently, I am faced with the challenge of storing user data (such as name, email, etc.) obtained through the createApi function into Redux store. However, I'm unsure of the best practice to achieve this. In my userApi.js file: export const userApi ...

javascriptreactjsreduxredux-toolkitrtk-query

Issue: ENOENT - The specified file or directory, './views/s.ejs', does not exist in Node.js Express

Encountering an error when attempting to render a file from the 'views' directory in the 'routes'. The specific error message is as follows: Error: Valid Login { [Error: ENOENT: no such file or directory, open './views/s ...

javascripthtmlmysqlnode.jsexpress

Encountered an issue with the ProgressPlugin: TypeError - Unable to access property 'tap' of an undefined element

Encountering a Problem with npm run build Here's the issue at hand Compiling client E:\ui\sheraspace_ui\node_modules\webpack\lib\ProgressPlugin.js:223 compilation.hooks.addEntry.tap("ProgressPlugin", entryAdd ...

javascriptreactjswebpacknext.js

What strategies can I employ to address this historical issue?

Encountered TypeError: (0 , history_history__WEBPACK_IMPORTED_MODULE_6_.default) is not a function This issue arises in my history.js file import { createBrowserHistory } from 'history'; export default createBrowserHistory({ forceRefresh: tr ...

javascriptreactjsreact-routerreact-router-dom

Ways to arrange choices alphabetically in Vue.js

Is there a way to order the options alphabetically in my quiz app? I followed the code from this source, but I need the responses listed in alphabetical order. How can I achieve that? Here is the question list sent to the template Response var quiz = { ...

laravelvue.js

Issue encountered with AJAX multiple image uploader

I'm attempting to create an PHP and JavaScript (jQuery using $.ajax) image uploader. HTML: <form method="post" action="php/inc.upload.php" id="upload-form" enctype="multipart/form-data"> <input type="file" id="file-input" name="file[]" a ...

javascriptphpjqueryhtmlajax

Tips for reversing a sketch: Creating a timer where the text continuously refreshes causing it to intersect

Currently, I am working on developing a stopwatch that is functional. However, I am facing an issue where the text overlaps itself when it changes due to repetitive drawing. Removing the strokeText and fillText from the interval prevents it from changing a ...

javascripthtmlsetintervalstopwatch

The child element fails to update when the properties are modified in the storage

Currently, I am utilizing Vue-js in tandem with require-js. My goal is to access data from the vuex store within my cart component so that I can render a separate component for each item stored. However, when I initiate a mutation from my body component to ...

vue.jsvue-component

What is the procedure for defining the secret code for a private key in saml2-js?

I need to implement a key/cert with a passphrase in my project that's currently using saml2-js. I have already set up everything but encountering a bad decrypt error without the passphrase. Is there a way to incorporate this passphrase? Below are the ...

javascriptnode.jsexpresssaml-2.0

Error: Missing provider for MatBottomSheetRef

While experimenting in this StackBlitz, I encountered the following error message (even though the MatBottomSheetModule is imported): ERROR Error: StaticInjectorError(AppModule)[CountryCodeSelectComponent -> MatBottomSheetRef]: S ...

javascriptangulartypescriptangular-material

Identifying Changes with jQuery Event Listeners

I am trying to run some javascript code that is in the "onchange" attribute of an HTML element. For example: <input id="el" type="text" onchange="alert('test');" value="" /> Instead of using the onchange attribute, I want to trigger the e ...

javascriptjqueryonchange