"Addressing the issue of an unrefreshed info-window in AngularJS and Google Maps

I've been facing some challenges with info-windows that display when clicking on custom markers. I managed to get them to show up, but the outcome is not quite right. What happens is, when I click on the first marker, the info box displays its content correctly. However, if I click on any other marker after the first one, the info-window shows up with the previous content instead of the current content. This issue occurs with every marker: the first clicked works fine, but the subsequent ones show the previous content.

Here's my code:

<map data-ng-model="mymap" zoom="4" center="[38.50, -95.00]" style="heigth:375px">

          <info-window id="foo">
          <div ng-non-bindable="">

            <ul>
              <li ng-repeat="item in list">{{item.name}}</li>
            </ul>
          </div>
        </info-window>

          <marker ng-repeat="item in list" 
          position="[{{item.coordinates}}]" itemTitle="{{item.name}}" 
          icon="./images/i.png" on-click="showInfoWindow('bar')" />     

        <info-window id="bar">
        <div class="infowindowtexttitle">{{this.itemTitle}}</div>
        </div>
        </info-window>

Answer №1

Solution found by: 1) Wrapping both the marker and info-window in a new div element 2) Relocating the ng-repeat directive to this newly created div 3) Referring to the iterating variable (item) instead of using "this" keyword.

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

Encountering an issue when attempting to save JSON data in the database: unable to convert object into a string

To summarize, my data is stored in Javascript: JSONdata = { name: form.name.value, address1: form.custa.value, address2: form.custa2.value, postcode: form.custpc.value, order: fullorder, cost: document.getElementById('total&ap ...

What is the best way to dynamically render classes based on conditions in a table using React Bootstrap?

I am looking for a way to dynamically change the color of a class based on the transaction data in a table. import React from "react"; import Table from "react-bootstrap/Table"; import "./TableComponent.css"; const TableComponent = ({ Movement }) =&g ...

What is the reason for HereMap factoring in stopOver time when calculating travel time for the destination waypoint?

I am currently working on a request using the HereMap Calculate Route API. Waypoint 0 does not have any stopOver time, but waypoints 1 and 2 do have stopOver times. Below is an example of the request: https://route.ls.hereapi.com/routing/7.2/calculateroute ...

The slider customization on Joomla is functioning perfectly on my local machine, but it seems to be encountering some issues on

Having recently started working on a Joomla website for the first time, I encountered some challenges when trying to add a slider module. Despite successfully implementing the slider on my local machine, I faced issues when transferring the code to the liv ...

Using jQuery to toggle the visibility of a group of radio buttons causes the div to quickly appear and disappear

My code is working perfectly as it shows up when needed and disappears when necessary. The concept behind this form is that the user can check a box, view more required form data related to the checked item, make those fields required, and then uncheck the ...

Select one href by clicking and apply addClass

I have a one-page HTML document with links in the header. I want to make it so that when I click on a link (<a>), only that specific link changes its class to (.links). I've tried various methods, but the current jQuery method I'm using ad ...

Deny access to the viewing feature for unauthorized users

Objective: To restrict access to the profile page only for logged-in users. The authentication is done through mongodb and passport-local. Existing Code: Below is the express route used to verify if the request is authenticated. app.get('/loggedin ...

Updating Mongoose References

When updating the Kwizz model with the password from req.body and team ID from req.session, it currently replaces the existing teams array. However, I am looking to simply add 1 to the array instead. I have searched for a solution but couldn't find a ...

When the content of input fields (specified by type="number") is modified, the two-way binding property of angularjs is lost

My issue seems simple but is quite tricky to tackle. When accessing the index.php (locally using xampp), you will encounter a basic form. The form contains multiple elements and is a work in progress, hence the likelihood of bugs. However, there is one par ...

What is the best way to transform this JSON data into an HTML table using JavaScript?

I am looking to dynamically create an HTML table based on changing json data. I want the table to maintain consistent alignment and width, similar to the example shown here. How can I convert the incoming json data into a well-structured HTML table? [ ...

What could be the reason my span is not altering color as I scroll?

Important HTML Knowledge <section class="home" id="home"> <div class="max-width"> <div class="home-content"> <div class="text-1">Hey t ...

Is your JQuery Gallery experiencing issues with the next button function?

I'm working on developing a simple gallery using JQuery. The main concept is to have all image files named x.png (where x is a number), and the program will then add a number to the current one, creating x+1.png and so forth. Here's the code I ...

Using a unique key to access a JSON object within a JavaScript club

I'm attempting to organize a cleaner JSON object by grouping multiple objects with the same IDs. Here's my approach: 1. Save the ID of the first object and compare it with subsequent IDs. 2. Loop through the array to identify matching IDs. If f ...

Selecting items in an HTML table using a drag-and-drop feature for selecting square or rectangular sections with colspan and rowspan

I am currently working on an implementation for selecting cells in a table. The challenge I am facing is that the cells in question can have a colspan or rowspan, which means that the selection is not restricted to a square or rectangular shape. For exampl ...

Maintain the active menu open when navigating to a different page on the website

My website has a dropdown menu, but whenever I click on a submenu link, the new page opens and the menu closes. However, I want the active menu to remain open on the new page of the website! To demonstrate what I have tried in a simple way, I created an e ...

Avoid blurriness caused by entering data in v-combobox

When using <v-combobox> in Vuetify.js, I noticed that when I click away, the value I had typed gets added to the model automatically. Is there a way to prevent this behavior? Check out the official documentation for Vuetify combobox here View the ...

Choosing the right framework for implementing push notifications can be a critical decision. Should

I am currently working on a Java application that requires the server to send push notifications to the client every one second. To achieve this, I am using HTML5 server-sent events for one-way communication from the server to the client. However, my conce ...

Error: Attempted to access 'embed' before it was initialized (hi)

module.exports = { name: "slowmode", description: "Set the slowmode of a channel.", execute(message, args, Discord) { if(!message.member.hasPermission("ADMINISTRATOR")) { return message.reply(&q ...

How does the method of including JavaScript libraries in HTML differ from adding them as npm dependencies?

Upon browsing through npm highly regarded packages, I noticed that popular projects such as Grunt, lodash, and underscore are readily available. I have always utilized these in the traditional manner: <script src="js/lib/lodash.min.js"></script& ...

Locate an element within an array of strings to refine the contents of a flatlist

Currently, I have a FlatList that I am attempting to filter using multiple inputs from dropdown selectors. Here is the code snippet for my FlatList component: <FlatList style={styles.list} data={data.filter(filteredUsers)} ...