The scope of Javascript within a Backbone component

Currently, I am facing an issue with scope in my backbone single page app that incorporates Google Maps. Despite ensuring all scripts are included in the correct order, I am struggling to understand why I am unable to instantiate a Google Map object as a global property outside of a function. Below is a snippet of my view declaration that works:

Viewer.Views.PhotosMap = Backbone.View.extend({
el: $('#conteneurLoad'),
markersOld: {},
mapOptions: function() {
    return {

        center: new google.maps.LatLng(35.3152208011549, -70.40635300000008),

    };
},...

and here is the failing version:

Viewer.Views.PhotosMap = Backbone.View.extend({
el: $('#conteneurLoad'),
markersOld: {},
mapOptions: {

    center: new google.maps.LatLng(35.3152208011549, -70.40635300000008),

},...

Upon using the second version, I encounter a "google is undefined" error. Any clear explanation or solution would be greatly appreciated. Thanks.

Answer №1

Apologies for my mistake, the solution to the issue was not as clear as I initially thought. The problem stemmed from the fact that the first function is only executed when called, while the second is executed when parsing the file. Therefore, in this scenario, the order of including the scripts is crucial.

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

Automatically adjusting the height of an iFrame using jQuery

Is there a way to automatically adjust the height of my iframe based on its content? I've successfully achieved this using a jQuery plugin called jquery-iframe-auto-height by house9. Now, I want the homepage within the iframe to fill the entire heigh ...

Should I deploy the Angular2 demo app within Rails or as its own standalone application?

Currently diving into the world of Angular2 and completing both the quickstart and heroes tutorial. Each time I start these applications, I use the "npm start" command. On top of that, I've developed a Ruby on Rails backend application alongside an A ...

Spin picture 90 degrees using HTML5 Canvas

I'm struggling to properly rotate an image on an HTML5 canvas. I suspect that my math is off, and I would greatly appreciate assistance in correcting this issue. While working on a mobile device, I am collecting a user's signature on a 150px by ...

Weird errors popping up when running npm build in ReactJS - lifecycle and export issues arise

Currently facing an issue while trying to build a React project using npm run build for creating a production build Running npm start works perfectly fine and compiles the react code without any issues npm run build - error https://i.sstatic.net/lMfbK.pn ...

Trigger function in React after the page finishes loading

I have a scenario where I need to display images onDrop within one of my components. To ensure a smooth drop experience, I am considering preloading the images using the following approach: componentDidMount(){ this.props.photos.forEach(picture => ...

The query datetime picker is unable to retrieve the date when called in a different function

Could you please clarify why I am receiving an "undefined" value in the second alert of the loadchart function call? What is causing the error here? I am encountering an issue with fetching dates from a date timepicker while using Bootstrap. Below is my ...

What is the best way to load my CSS file using express.static?

How do I properly load my CSS file using express.static in Node.js? I have attempted various methods to link my stylesheet to my HTML file through Express, and I'm also interested in learning how to include images, JavaScript, and other assets to crea ...

I can't figure out why I'm receiving a TypeError stating that onSuccess is not a function within my AngularJS service

Utilizing an angularjs service that utilizes restangular for API calls. angular.module('app.userService', []) .factory('userService', ['localStorageService', '$rootScope', 'Restangular', func ...

when the keyboard appears on mobile, ensure that the input element is in focus

Is there a way to automatically scroll the page/form to focus when a user clicks on an input field and the keyboard pops up? I want the input field to be displayed within the current view. I've attempted two solutions, but neither seems to be effecti ...

Tips for resolving the issue of infinite re-render with react-hook-form?

Struggling to build a basic form in React with react-hook-form library. Implemented various validations and features in the form. However, encountering the following console error. Error message on console: Warning: Maximum update depth exceeded. This can ...

Google Maps does not support markers appearing on the map

I have created a basic web application that displays markers from a MySQL database on Google Maps using a table called markers_titik. In order to process this data, I have written a simple PHP script named map_process.php. Here is the code: <?php //PH ...

Guide to creating multi-line routes for routing

At times, the routing path becomes too long for easy reading, so I would like to display it in multiple lines for better visibility. I understand that a multi-line string is typically formatted like so: var str = 'hello \ world &bsol ...

What are the advantages and disadvantages of utilizing ajax for form submission?

Lately, I've been relying heavily on AJAX for submitting forms like user registration and login. However, I'm curious about the safety of using AJAX for sensitive data like usernames and passwords. Can you provide some insight into the pros and c ...

Calculate the total sum of the properties of the objects within the array

I need to calculate the total sum of unit prices. Any suggestions on how I can achieve this? This is what the array looks like: $scope.items = [ { id: '1', name: 'Phone', quantity: '1', u ...

Troubleshooting: Next.js - Issues with encodeURIComponent function when using `/` in getStaticPaths

Reproducible site showcasing the issue: Reproducible code example: https://github.com/saadq/nextjs-encoding-issue Homepage Food page The goal is to dynamically create static pages for different food items based on their titles. This functionality works ...

An error related to Angular module injection occurs while trying to execute my application

I'm new to Angular and I'm a bit confused by this error message. I'm not sure where I went wrong, but my console is displaying the following error: angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$inje ...

Ensuring jQuery filter() works seamlessly with Internet Explorer versions 6, 7, and 8

On my webpage, I have implemented an ajax call using the jQuery library to handle a specific task. After making the ajax call, I need to parse the response message that is returned. However, I encountered an issue with Internet Explorer versions 6, 7, and ...

What could be the reason behind Strapi v4 only displaying the initial 25 articles? Discussing Next.js and React

I've encountered a peculiar bug while working with Strapi v4. The technology stack being used is React and Next.js I've set up a dynamic pagination system with the format /page/[slug]. It's functioning almost perfectly, except for one majo ...

Ways to verify if a user is currently on the webpage using JavaScript

Is there a way to determine in JavaScript whether the user is currently on the page or on another tab? I want to implement a notification for new messages, but only if the user is not currently on this tab. ...

Gallery of Flickr Photos

I have integrated Flickr code to showcase a photostream on my HTML page: <!-- Start of Customized Flickr Badge --> <style type="text/css> #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;} #flickr_bad ...