The uiGmapGoogleMapApi.then function is failing to execute on Android devices

I successfully incorporated angular-google-maps into my Ionic project - in index.html, I included the following scripts:

<script src="lib/lodash.min.js"></script>
<script src="lib/angular-google-maps.min.js"></script>

Within my view HTML file, the code looks like this:

<ion-view>
    <ion-content controller="WeatherController">
        <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
    </ion-content>
</ion-view>

The configuration setup in app.js is as follows:

.config(function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        key: 'mygmapskey',
        v: '3.17',
        libraries: 'weather,geometry,visualization'
    });
});

Also, there are specific styles defined in style.css for the map container:

.angular-google-map-container { height: 400px; }

And within the WeatherController script, I have this code:

angular.module('starter', ['ionic', 'uiGmapgoogle-maps']);

...

.controller("WeatherController", function ($scope, uiGmapGoogleMapApi) {
    console.log('WeatherController');
    uiGmapGoogleMapApi.then(function(maps) {
        console.log('maps API loaded; creating map');
        $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
    });
});

While everything works smoothly when running 'ionic serve' on a browser, I encountered an issue when testing it on Android devices. The WeatherController is initialized, but uiGmapGoogleMapApi.then doesn't trigger. Is this expected behavior on mobile devices? I couldn't find much information about it on the official site.

Answer №1

It could be related to the minification process. When minifying your code, it is important to use array injection syntax like this:

.controller("WeatherController", [
  '$scope',
  'uiGmapGoogleMapApi',
  function ($scope, uiGmapGoogleMapApi) {
      console.log('WeatherController');
      uiGmapGoogleMapApi.then(function(maps) {
          console.log('maps API loaded; creating map');
          $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
      });
  }
]);

Make sure to use this syntax not only in your controller but also when declaring your main module starter.

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

Enhance user experience by implementing an autocomplete feature for a text input field

Can you name the process in which a form is automatically filled using database information without needing to refresh the page? One common example of this technique is seen on platforms like Google or Facebook, where they predict friends you may be searc ...

Issues encountered while setting up @angular/google-maps on angular13

Every time I attempt to install, this error displays: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="402d21306d212323 ...

Having trouble navigating to the link using Selenium WebDriver

I encountered an issue when trying to click on a link as it displayed an "Element Not Found" message. Below is the HTML code I used: <a id="expTo" class="formblue_link padRight10 exportLinkActive" style="display: block; margin-left: -50px; margin-b ...

The VueJS function is not defined

Looking for a way to fetch data from graphql in my vue project and store it in a variable. The function is asynchronous and the value of rawID needs to be awaited. However, there is a possibility that it could result in undefined, causing an error in the ...

Try utilizing querySelectorAll() to target the second item in the list

As I delve into the world of HTML and JS, I came across the document.querySelectorAll() API. It allows me to target document.querySelectorAll('#example-container li:first-child'); to select the first child within a list with the ID 'exampl ...

Applying a variety of elements to a single function

I am in the process of creating a mini-survey and I want the buttons to change color when clicked, but return to normal when another button is selected within the same question. Currently, clicking on a button turns it red while leaving the others clear. H ...

Event handler for "copy" on the iPad

Is it possible to bind an event handler to the copy event on iPad or iPhone devices? ...

The Google Maps listener event behaves as if it were clicked even though it is triggered by a mouseover

Two google.maps.event.addListener events are being added here google.maps.event.addListener(markerAcademicCenter, "mouseover", function (e) { markerIconAcademicCenter.url = 'MapIcons/Circle32.png' }); google.maps.event.addListener(markerAcade ...

Do you think there is a more efficient way to solve this issue?

const [active, setActive] = React.useState(["active", "", "", "", ""]);``your unique text`` const hrefs = React.useMemo( () => ["/", "/about", "/skills", "/projects", "/contact"], [] ); React.useEffect(() => { setInterval(() => { ...

What is the best way to transform a List<Pair<String, String>> to a List<String> using JavaScript?

Here is the data output structure: Map<String, List<Pair<String, String>>> "testdata": [ { "1.0": "True" }, { "1.1": "False" } ] ...

Creating an installation package for an Electron application on Windows

Is it possible to create a Mac installer for an Electron app using a Windows PC? I have tried running npm make, but it only generates a Windows installer. ...

Ways to avoid submitting based on the outcome of AJAX requests

When working on an ASP.NET MVC Project, I encountered an issue where I wanted to prevent a button from submitting if the result returned from an AJAX call was false. However, no matter what I tried, the button always triggered the submission. Below is th ...

Post with rectangular shape

In my current project, I am utilizing a RESTful API to store task-related JSON data. The backend is powered by Flask, while the frontend makes use of AngularJS. Currently, the system allows me to view all tasks. However, I am looking to convert this funct ...

Update: The sum of products and total cost are correctly calculated, however, the values are not being updated when the quantity is adjusted

I understand how to calculate the sum of products and total cost, but I want the values to update automatically when item quantities change. .filter('total', function () { return function (input, property) { var i = input instanceof ...

Is it possible to verify if each input is unique using the parsley validator?

As a novice, I am struggling with a task where I have 6 School Children IDs. The teacher needs to input these IDs, and while it's not vital for him to enter all of them, he must input at least one. Furthermore, if he decides to input more than one ID, ...

Is there a way to set up a local npm module directory without using symlinks

Here is a breakdown of the file structure in a simple way. /my-module ..package.json /my-app ..package.json I am trying to have my-app install my-module locally. This is what I have attempted: "dependencies": { "myModule": "../my-module" } The opti ...

Error: Attempting to modify a constant value for property 'amount' within object '#<Object>'

After fetching data from an API, I stored an array in a state. Upon trying to update a specific field within an object inside the array using user input, I encountered the error message: 'Uncaught TypeError: Cannot assign to read only property 'a ...

How a Dynamic Icon Component in NextJS/React can disrupt Jest testing

Hello there! I'm a new member of this community, and usually I can find answers to my questions by searching. However, this time around, I need some help. My Current Setup I am using NextJS solely as a framework application without utilizing its API ...

What is the method to retrieve a checkbox value within a datatable when employing pagination?

I recently came across an issue with my datatable where I had implemented a checkbox in the first column of each row. However, when I attempted to check the checkbox using an AJAX call, it only worked for the first page and not for any subsequent pages. H ...

Printing feature not functioning properly on Internet Explorer version 11

Currently, I am facing an issue with printing a document using a blob URL and iFrame. Everything works perfectly in Chrome, but unfortunately, it's not functioning properly in IE browser. I need guidance on how to successfully print a blob URL that i ...