Angular infowindow for markers

Looking for information on <ui-gmap-markers>, specifically trying to add basic 

content = "<div><h3>Title</h3>Text here..</div>"
when clicking with multiple markers. Unable to find documentation for this scenario, as current docs are only focused on single markers.

$scope.change_type = function(val) {
    content = "<div><h3>Title</h3>Text here..</div>"
    $scope.markers = [] //clears the map
    $scope.markers = Events.venues(val.type)
}

Here is an example of marker data:

{options:{ title:"Barney's"},type:'Bar', latitude: 42.992538, longitude: -81.251819}

The following scripts are included in the index.html

<script src='lib/lodash/dist/lodash.js'></script>
<script src='lib/angular-google-maps/dist/angular-google-maps.js'></script>
<script src='lib/addons/markerwithlabel.js'></script>
javascriptangularjsgoogle-maps

Answer №1

After spending some time experimenting with the ui-gmap-markers feature today, I finally managed to understand how it works. Here's a snippet of my HTML code that seems to be functioning properly:

<ui-gmap-google-map center='main.map.center' zoom='main.map.zoom' options='main.map.options'>
    <ui-gmap-markers models="main.markers" coords="'self'" icon="'icon'" options="'options'" click="'onClick'" fit="true">
        <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
            <div data-ui-sref="display">                                                                      
                <span data-ng-non-bindable>{{ title }}</span>
            </div>
        </ui-gmap-windows>
    </ui-gmap-markers>
</ui-gmap-google-map>

In my controller, I've implemented the following logic:

uiGmapGoogleMapApi.then(function(maps) {
    var markers = [];
    _.each(vm.itemlist,function(item){
        search.getGeometry(item.href).then(function(marker) { // Retrieving GPS coordinates from external source
            marker.id = item.href;
            marker.showWindow = false;
            marker.options    = {
                                 title: item.name,
                                 icon: markericon.normal
                                };
           marker.onClick    = function() { vm.markerClick(marker); };
           marker.closeClick = function() { vm.markerCloseClick(marker); };
           markers.push(marker);
        });         
    });           
    vm.markers = markers;
});

I hope this information serves as a helpful reference for you in your own project exploration.

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

The integration of Tailwind merge is experiencing issues when used with CSS modules

My Next.js project utilizes Tailwind for styling elements, and I rely on Tailwind's merge feature to address class precedence issues within my components. It appears that the merge feature does not function correctly when working with CSS modules (spe ...

javascriptreactjstypescriptnext.jstailwind-css

What might be causing req.body to be an empty object?

I'm currently diving into the world of XMLHttpRequests. My goal is to send some input data to the server, but when it reaches its destination, the Object appears empty as if it were {}. I've noticed that by commenting out the setRequestHeader sec ...

javascriptjsonexpresspostxmlhttprequest

What is the process for transmitting data using an Ajax Query to a Controller and subsequently displaying a new JSP page returned by the Controller?

One issue I am facing involves sending data to a Spring Boot Controller through an AJAX Query and then loading a new JSP page. When I send data to the url in the AJAX Query, which matches the URL in my controller class, it executes the code within that met ...

javascriptjqueryajaxjsp

What is the best way to customize column width in AG-Grid?

I am looking for a way to dynamically set column width in my table. I have provided a stackblitz example which demonstrates that when changing the screen size, only the table border adjusts, but not the column widths. Is there a way to also change the col ...

javascripthtmlcssangular

Guide to building a multi-dimensional array from a flat object

My endpoint is outputting data in a specific format: const result = [ {id: 4, parentId: null, name: 'Fruits & Veggies'}, {id: 12, parentId: 133, name: 'Sanguinello'}, {id: 3, parentId: 4, name: 'Fruits'}, {id: 67, ...

javascriptrecursionrecursive-datastructures

Identifying the source object when using JSON.stringify

There is an object set up like this: { item1: "value1", item2: "value2", item3: { item4: "value4", item5: "value5" } } The goal is to utilize JSON.stringify along with a replacer function that behaves differently for items 4 & 5 ...

javascriptjsonstringify

Before clicking the submit button, send field values using Ajax

Is it possible to send values using ajax before submitting form data with a submit button? I have the code below. It successfully reaches the success function, but I am unable to retrieve the posted data. Any ideas on how to solve this issue? Your help an ...

javascriptphpjqueryajaxforms

The Methods in Vue's optionMergeStrategies do not have access to the 'this' keyword

I have been working on developing a Vue plugin. The plugin includes a custom method called customMethod for each component, which I want to execute after the page has been mounted/created. Although everything seems to be working fine in a basic way, I am f ...

javascriptvue.jsvuejs2

Locate the maximum and minimum elements from within each nested array using JavaScript

Here is an array I'm working with: var arr = [[12,45,75], [54,45,2],[23,54,75,2]]; I am trying to determine the largest and smallest elements in this nested array: The minimum value should be: 2 while the maximum should be: 75 I attempted using t ...

javascriptarraysmaxmin

Node.js require function not functioning as anticipated

After using Node and node express generator to create node express code successfully, I encountered an issue when attempting to deploy it to the server. By default, there are a couple of files present: .bin/www ( containing var app = require('../app ...

javascriptnode.jsexpress

sophisticated mongoose search utilizing $where clause

Dealing with a complex mongoose query has been giving me a headache. As someone who is still new to it, I was hoping for some suggestions on how to solve this issue. The gallery collection I am working with has the following fields: status (with value ...

javascriptnode.jsmongodbmongoosemean-stack

How can we avoid page flickering and stuttering while scrolling using the ScrollTo script?

Currently, I am utilizing Ariel Flesler's ScrollTo script which can be found on this page. There are two links located at the bottom of the page that when clicked, will scroll to the top of the page. One of the links also triggers a contact form to op ...

javascriptjqueryscrollscrollto

Strategies for sorting an array of objects based on specific attributes

Here is an array of objects containing finalists: finalistsCollection = [ { name: 'Ann' , sections: [{id: '132', name: 'someName'}, {id: '456', name: 'someName'}] }, { name: 'Jack' , sect ...

javascriptarraysfiltering

JavaScript alert: element does not exist

Check out my code snippet below. The inline JavaScript alert works fine, but the external one isn't firing. Every time I reload the page, I'm greeted with a console error message saying "TypeError: tileBlock is null". Any suggestions on how to re ...

javascriptconsole

Refreshing an Angular datatable using promises - reload directive

I am currently using angular-datatables along with promises and everything is working smoothly. I have various actions that can be performed on each record (using angular $http resource) such as changing a status or similar tasks. However, I find that I n ...

javascriptangularjsdatatablesangular-httpangular-datatables

Support for Chrome in Angular 8

Can someone please advise on the minimum version of Google Chrome that is supported by Angular 8? Additionally, I am looking for a way to prompt users to update their Chrome browser if it doesn't meet the required version. My Angular application seems ...

javascripthtmlangular

Dynamic height changes with AngularJS MasonMasonry

One issue I encountered is that when my expanding divs overlap with the ones below due to absolute positioning from Masonry and a certain directive. To address this, I need the lower divs to move down as the top div expands. You can find more information ...

javascriptangularjsdirectivemasonry

Using cookies locally is smooth, but unfortunately they don't seem to function as expected on VPS

I am experiencing an issue with cookies when deploying my nodejs and angularjs 1.6.4 project from localhost to Digital Ocean droplet via Github. Although everything functions properly on localhost, the cookies do not work on the droplet. Any data saved to ...

angularjsnode.jscookiesvps

Using AngularJS to create a select dropdown menu with nested objects as the options

Currently, I am working on developing an AngularJS application with a complex data structure. The data source consists of an array of individuals with their languages and skill levels. My goal is to be able to filter these individuals based on language sk ...

javascriptangularjs

'An error occurred when invoking the class method due to 'This' being undefined

I'm attempting to display a response message to the user, but encountering an error (Cannot read property 'message' of undefined). Here's the code snippet causing the issue: server.js const server = express(); let App = require(' ...

javascriptnode.jsexpress