Employ Angular within the parameters of a JavaScript function call

My goal is to incorporate Google Maps into my webpage for various locations (lieux). Within the HTML page, I have the necessary function set up for Google Maps.

<script> 
  function initialize(long,lat) {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(long, lat),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
   document.getElementById('map_canvas').style.display='block'; 
</script>

In addition, I have a button that triggers the display of the map.

 <div class="tab-pane" id="tab_b" ng-controller="LieuController as lieu">
       <div  class="list-group-item" ng-repeat="lieu in lieu.lieux ">
  <button onclick="initialize({{lieu.x}},{{lieu.y}})">Click me</button> 
    <div id="map_canvas"></div>
 </div>

Can the function be called with parameters as shown, or is there an alternative method?

javascriptangularjs

Answer №1

There are a number of issues with the code you've provided. While it is technically possible to combine Angular and vanilla JavaScript DOM 0 events as you're attempting, there are some challenges that arise.

1. If you've tested your code, you may have encountered the error message thrown by Angular in such cases:

Interpolations for HTML DOM event attributes are disallowed.

This limitation prevents access to Angular scope data within external JavaScript functions. One workaround involves storing the necessary data in custom attributes and then utilizing them when needed. For example:

<button onclick="initialize(this.getAttribute('data-x'), this.getAttribute('data-y'))" 
        data-x="{{l.x}}" data-y="{{l.y}}">Click me</button>

2. Even if you resolve the above issue, you'll still encounter problems with duplicate IDs. Your initialize function is expected to render a map in separate containers for each row generated by ngRepeat, all using the same ID map_canvas. Additionally, your library's onload event triggers initialize again.

google.maps.event.addDomListener(window, 'load', initialize);

3. Given these challenges, it's advisable not to proceed with an application structured in this manner. It would be beneficial to deepen your understanding of fundamental AngularJS principles.

For your specific case, consider implementing ng-click instead of onclick, defining initialize within a custom service, or developing a custom directive to manage individual map rendering in appropriate containers.

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 progress bar seems to be malfunctioning

Need help with my progress bar, it's not working properly. Can someone assist me? var x = document.getElementById("p_bar"); for(var i = 0; i < 100; i++) { var wid; wid=1; if(wid == 800) break; else wid+=8; x.style.width=wid+" ...

javascripthtmlcss

Divide material-ui toolbar into separate left and right sections

Is there a way to split the material-ui toolbar into a left and right part? I want to display the numSelected on the left side of the toolbar, and the delete button and edit button on the right side. Currently, my output shows these buttons just beside t ...

javascripthtmlreactjsmaterial-ui

Identify when a mouse hovers within 10 pixels of a div using jQuery

Is it possible to detect when a user hovers over a specific area within a div using JavaScript or jQuery, without adding any additional tags? -------------------------------- -------------------------------- -------------------------------- -------- ...

javascriptjqueryhtmlcss

Preserve user-inputted text from jQuery within a div container

With the help of the knowledgeable individuals here, I successfully created a prototype to address an issue I had encountered. The problem involved using a textbox input with a password requirement to update an HTML element. Although everything is functio ...

javascriptjqueryhtmldynamictext

What is the process of extracting a URL and inputting it into a form to enhance

Can anyone help with extracting a specific value (TEXT) from a URL and automatically paste it into an input form field? For example, if the URL is domain.com/page?code=123abc, I need to grab the code (in this case, 123abc) and have it automatically popula ...

javascripthtml

Utilizing JavaScript to trigger an email with PHP variables included

i am trying to pass a few php variables using a javascript trigger. Everything seems to be working with the variables, databases, and script but I am struggling with the PHP part. Here is my attempt at the PHP code, although it clearly has some issues. I ...

javascriptphphtmlemail

Guide on utilizing Vercel KV for storing and fetching posts from an API

Looking to optimize your API by utilizing Vercel KV for storing and retrieving posts? If you have a basic node.js express API that pulls random posts from MongoDB, the process of integrating Vercel KV can enhance performance. Initially, the API will resp ...

javascriptnode.jsmongodbvercel

Is it feasible to utilize the .fadeTo() function in jQuery multiple times?

I need some help with writing a script that will display a warning message in a div tag every time a specific button is pressed. I chose to use the fadeTo method because my div tag is within a table and I want to avoid it collapsing. However, I'm noti ...

javascriptjqueryhtml

Unexpected token error occurs when making cross-domain AJAX requests to the server and receiving a JSON object

I have set up an express server to handle get requests to specific url endpoints. When responding to these requests, I am sending back data in JSON format to enable making Ajax calls and retrieving data from the page. To allow for cross-domain requests, I ...

javascriptjsonajaxexpresscross-domain

I'm new to this, but can someone explain why I'm being redirected to the register_db.php page when I click on the register button?

Why when I click the register button, it redirects me to the register_db.php page instead of sending the data to the database and keeping me on the same register.php page? I want the data to be sent to the database without changing the webpage. register.p ...

javascriptphphtmlmysqldatabase

HTML5 Positioning Timeout

While working on my project, I incorporated the HTML Geolocation feature. However, I have observed that it is not always dependable. I am looking for a solution to add a backup plan that will time out after x seconds and display an error message. Any sugg ...

javascripthtml

"Repetitive" elements arranged horizontally

My goal is to create a looped row of elements, similar to this design: https://i.sstatic.net/7cC2z.png This row should function like a carousel where clicking the "Next" button changes the current element and positions it in the center of the row. I envi ...

javascriptcss

Error encountered: The Bootstrap Carousel function is causing a TypeError as e[g] is not defined

I am attempting to build a dynamic bootstrap carousel using my json data, and I have implemented jQuery-Template for rendering. Essentially, I am generating the carousel slider on-the-fly from my json data with the help of jQuery-Template. Here is a snippe ...

javascriptjqueryhtmltwitter-bootstrapjquery-templates

Issue with external JavaScript file being unresponsive on mobile browser

Hello everyone, hope you're having a great afternoon or evening I've encountered an issue with mobile browsers like Chrome Mobile and Kiwi where the external js file is not visible in the html file. The script.js file looks like this: alert(&ap ...

javascripthtmlmobileexternal

AccessMediaStream - camera direction

My current setup involves using an Android tablet and GetUserMedia to capture images in my program. It seems that by default, GetUserMedia uses the front camera. How can I set the rear camera as the default instead? Below is the code snippet I am using w ...

javascriptgetusermedia

Transferring callback variables from an Express GET request to a forked process in Node.js

I encountered an issue while trying to transfer the callback variables from app.get() to a forked process. The error message I received was: TypeError: Converting circular structure to JSON The primary goal behind this endeavor is to enable a main node w ...

javascriptnode.jsexpress

Excessive API requests can occur when Redux dispatches an action multiple times

Utilizing the Jikan API for anime, my objective is to showcase promo thumbnails of new anime shows. This involves two separate API calls: one to retrieve the latest anime shows: export const get_new_anime = () => `${base_url}search/anime?q&order_b ...

javascriptreactjsreduxreducers

Which method is better for HTML5/JavaScript GeoLocation: Passing data to a callback function or suspending an async call using promises?

Trying to figure out how to utilize HTML5/Javascript Geolocations effectively for passing location data to an ajax call and storing it in a database. The main challenges I'm facing are the asynchronous nature of the Geolocation call and issues with va ...

javascriptajaxhtmlasynchronousgeolocation

Tips for preventing text from changing its padding within a div when reducing the width and height dimensions

I am facing an issue with a div inside another div. The child div contains text, and when I apply animation to decrease the width and height, the text inside gets reset according to the new size. While I understand why this happens, I want to find a way to ...

javascriptjqueryhtmlcss

Activate trust proxy in Next.js

When working with Express.js, the following code snippet enables trust in proxies: // see https://expressjs.com/en/guide/behind-proxies.html app.set('trust proxy', 1); I am attempting to implement a ratelimit using an Express middleware that is ...

javascriptnode.jsnext.js