Error: Unable to find reference for Google in AngularJS

I am currently integrating Google Maps API into my app for location selection. I have included the following script:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places&language=en-US"></script>

While this setup is functional in a local environment, it encounters an issue when implemented in my main application.

ReferenceError: google is not defined angular.js:13294
at HTMLDocument.<anonymous> (VM6558 locator.js:87)
at fire (jquery.js:3187)
at Object.self.add [as done] (jquery.js:3246)
at jQuery.fn.ready (jquery.js:3496)
at Object.<anonymous> (VM6558 locator.js:86)
at Object.invoke (angular.js:4625)
at Object.enforcedReturnValue [as $get] (angular.js:4464)
at Object.invoke (angular.js:4625)
at angular.js:4424

The sequence of scripts is as follows:

<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css"/>
<script type="text/javascript" src="libs/jquery/dist/jquery.min.js">  </script>
<script type="text/javascript" src="libs/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/public/libs/jquery-ui/themes/smoothness/jquery-ui.css"> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places&language=en-US"></script>
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.js"></script>
<script src="libs/angular-animate/angular-animate.js"></script>
javascriptangularjsgoogle-mapsgoogle-maps-api-3

Answer №1

vm.activate = function(){
        var locationOptions = {
          zoom: 14,
          center: new google.maps.LatLng(10.772573, 106.698000)
        }

        map = new google.maps.Map(document.getElementById('order-location-map'), locationOptions);
        markerCoords = new google.maps.LatLng(vm.order.customer.address.position.lat, vm.order.customer.address.position.long);
        setTimeout(function(){
          google.maps.event.trigger(map, 'resize');
          map.setCenter(markerCoords);
        }, 50);

        customMarker = new google.maps.Marker({
          draggable: false,
          animation: google.maps.Animation.DROP,
          icon: "i/custom-marker.png",
          position:markerCoords
        });
        customMarker.setMap(map);
      }
      google.maps.event.addDomListener(window, 'load', vm.activate);

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

Store a distinct identifier as an object within a JavaScript collection

I am attempting to save a key as an object in JavaScript by using the Map collection: let tempEntry = {y:y, x:x} let exist = map1.has(tempEntry); if(exist){ map1.set(tempEntry, true) } else { map1.set(tempEntry, false) } However, I am facing an ...

javascript

Using React's useEffect to implement a mousedown event listener

I created a modal that automatically closes when the user clicks outside of it. method one - involves passing isModalOpened to update the state only if the modal is currently open. const [isModalOpened, toggleModal] = useState(false); const ref = useRef(n ...

javascriptreactjs

A guide on retrieving and resetting the value of a radio button within a table

I need to create multiple radio buttons within a table using Razor syntax under ASP.NET Core MVC. Each row of the table should have an update and clear link to update the record and clear the selected radio button for that specific row. <table class=&qu ...

javascriptc#jqueryasp.net-core

What is the best way to completely reset a personalized AJAX object?

I've been passing AJAX parameters through a new object and then using that object with jQuery's $.ajax(). However, I'm struggling to fully reset the object. Despite knowing there must be a simple and elegant solution, I haven't been abl ...

javascriptjqueryajax

Transform an array into a personalized grid layout

I am currently working on a grid that resembles a table, but is custom-created with divs and spans. My goal is to populate each cell with values from multiple arrays, however, I am encountering some difficulties in making it work properly. function genera ...

javascriptarraysfunctionfor-loopiteration

Guide on how to retrieve the vertex information once an object is loaded using the ObjLoader in Three.js

When using ObjLoader in Three.js to load a *.obj file into my scene, everything works fine. However, I'm uncertain on how to manipulate the object's vertices and indices individually. How can I access the vertices of the loaded *.obj model? Atte ...

javascriptthree.js

The operation to assign a value to property 'two' cannot be completed as it is currently undefined

I'm facing an issue with the code below and cannot figure out why I am encountering the error message. I have ensured that each object contains a value, so why is there a reference to 'undefined'? Cannot set property 'two' of unde ...

javascripttypescript

Error message "Unable to access property 'rotation' of an object that does not exist - Three.js"

I'm currently facing an issue where my code is executing as expected, but there are two errors popping up in the console saying "Cannot read property 'rotation' of undefined". It's puzzling because both variables are defined globally. I ...

javascriptthree.js

Initiating and handling a POST request

In my node.js server, I have a simple setup like this: var express = require('express'); var app = express(); app.post('/savearticles', function (req, res) { res.send(req.body); }); Additionally, the javascript code is not very c ...

javascriptnode.jsexpress

Once I have verified the user's credentials through a POST request, I will proceed to make a GET request

I am in the process of constructing a dashboard that automates logging into an API and updating specific data elements. I have successfully managed to login and authenticate, but I am unsure how to proceed with chaining the GET request after the POST actio ...

javascriptajaxapixmlhttprequest

Track the Mouse with Three.js - Dynamic Object Movement

I'm currently working on a Three.js project where I need to create a sphere that follows the mouse cursor, similar to the functionality demonstrated in this example. The code snippet responsible for handling the mouse movement is as follows: function ...

javascriptthree.js

Logging into Angularjs via Google web authentication

When utilizing Google's platform.js script to manage web logins, a callback can be included to trigger a function within our code: <script src="https://apis.google.com/js/platform.js?onload=appStart" async defer> Despite the abundance of Angul ...

angularjsgoogle-signin

React 18 doesn't trigger component re-rendering with redux

In my code, I have implemented a custom hook to handle global data fetching based on user authentication. Here is an example of the hook: const userState = useSelector(state => state.user.state) useEffect(() => { if(userState === "authentic ...

javascriptreactjsreduxnext.jsuse-effect

Tips for preventing tiny separation lines from appearing above and below unordered list elements

I am attempting to utilize twitter bootstrap to create a select-option style list. How can I eliminate the thin separation lines above and below the list of items? Refer to the screenshot: https://i.sstatic.net/1khEE.png Below is the visible code snippe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Grouped validation of redux form fields using nesting

Is this usage of redux-form Fields considered valid? const ValidatedFieldGroup = (props) => { const {meta: {touched, error}} = props return ( <div className={touched && error ? 'has-error' : ''}> <Fiel ...

javascriptreactjsredux-formredux-form-validators

Cannot utilize the subscribed output value within the filter function

I am in need of assistance with my Angular 7 project. I have successfully implemented a service to call a Json file and output an object array. However, I am facing an issue when trying to filter the objects in the array based on a specific property called ...

javascriptangulartypescriptangular7

circumvent the JSON web token to perform a POST request using a web browser

While looking at the network tab, I came across this request: https://i.sstatic.net/hNqJD.png I attempted to use to post to the request, but it was unsuccessful. Can someone explain the authorization process involved in this request? Is it a security me ...

javascriptjqueryangularjsnode.jshttp

Having trouble with a beginner problem that's hindering the functionality of my code

I have been struggling with a particular piece of code and it is driving me crazy as I am unable to locate the source of my error: $.post($form.attr('action'), $form.serialize(), function (result) { console.log(result); if (result.succes ...

javascriptjqueryajax

Adjust the viewport width based on the width of the device

Having difficulty adjusting the meta tag viewport content width based on device width, I am struggling to achieve my desired outcome. Here is the code snippet I have been working with: Code snippet: <meta id="viewport" name="viewport" content="width=d ...

javascripthtmlioscssviewport

Formik Alert: Update depth limit reached

Currently, I am working on an EDIT formik form that is displayed as a MODAL. The issue arises when the setState function is triggered with setState(true), causing the form to appear without any onClick event. Despite changing onClick={editStory} to onClick ...

javascriptreactjsreact-hooksnext.jsformik