When navigating through the page, Google Maps will display a portion of the map corresponding to your

I recently incorporated the Angular Google map component into my project, using the following code:

<google-map [options]="location?.googleMap?.mapOptions" height="100%" width="100%">
  <map-marker
    #marker="mapMarker"
    *ngFor="let mapPinAddressMarkerPosition of location?.googleMap?.mapPinAddressMarkerPositions"
    [position]="mapPinAddressMarkerPosition?.markerPosition"
    [options]="mapPinAddressMarkerPosition?.markerOptions"
   >
  </map-marker>

  
</google-map>

The map works perfectly the first time it loads. However, I have noticed that if I navigate away from the page and then return to the Map tab, only a portion of the map is displayed. Any idea why this is happening?

Side Note:

This issue occurs for me when I click on a marker pin, which redirects me to another tab page programmatically, and then I return to the Map tab. For example, using 

this.router.navigateByUrl('tabs/leads')
after clicking the Pin icon.

https://i.sstatic.net/bsSWZ.jpg

angulartypescriptgoogle-mapsionic-framework

Answer №1

After setting up a boilerplate ionic tab project, I decided to include a Google map directive on the first tab page using an Angular library. To make it work, I had to wrap the map options object within the NgAfterViewInit lifecycle method and load the Google map directive once the options object was loaded. Take a look at the code snippet below:

Keep in mind, while the null/AfterViewInit method did the job, I am certain there are more efficient ways to accomplish this task. This was just my initial attempt to address a potential lifecycle issue. I plan to update this answer once I explore alternative solutions.

Tab1.html

<div if="options != null">
  <google-map [options]="options"></google-map>
</div>

Tab1.ts

export class Tab1Page implements AfterViewInit  {
  
  options: any = null;

  constructor() {}
 
  ngAfterViewInit() {
    options: google.maps.MapOptions = {
      center: {lat: 40, lng: -20},
      zoom: 4
    };
  }
}

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

Angular2/4 is throwing a 405 error, indicating that the method used is not

updateEmployeeData(ename,ejobtitle,edept,eunit,equal,eaqser,empid) { let url = GlobalVariable.BASE_API_URL + "api/updateEmployeeProfile"; let headers = new Headers({'Content-Type':'application/json'}); let options = new Reque ...

angular

What is the best way to generate inner HTML components within Angular by creating components?

I want to create a custom component that functions similarly to Material Tabs. I currently can use Material Tabs to create tabs like this <mat-tab-group mat-align-tabs="center"> <mat-tab label="First Tab"> <p& ...

angularangular-material

development of MapLayers with rails and javascript

As a newcomer to RoR, I am encountering an issue that seems to be eluding me. I attempted to replicate the example application found on the mapLayers GitHub repository at https://github.com/pka/map_layers/wiki. However, all I see is the JavaScript code gen ...

javascriptruby-on-railsrubygoogle-maps

Using Angular 2: Applying a specific class to a single element with [ngClass]

I have a header table with arrows indicating sorting order, using Bootstrap icons. However, when I click on a column, all columns receive the icon class. Here is an example of what I mean: https://i.sstatic.net/CAS81.png Below is the code snippet: HTML ...

twitter-bootstrapangulartypescriptbinding

Customize validation timing in Angular Reactive Forms

One common query about the conditional validator is understanding when exactly it gets triggered. Imagine a simple form with just two fields this.form = formBuilder.group({ emailRequired: [false], emailRecipients: [''] }); Now, let's s ...

angularvalidationangular-reactive-forms

How to eliminate the button from Google Maps API using JavaScript

I am trying to implement a specific functionality on my map. When the user drags the map, I want a button named 'Search in this area' to appear. Once the user clicks on the button, it should disappear so that the search can't be performed ag ...

angulartypescriptgoogle-mapsgoogle-maps-api-3angular6

What is the correct way to effectively share data between components using a service?

I've been diving into learning Angular 2 and successfully implemented data sharing between sibling components using input/output functions. Check out my working example here. // Our root app component import {Component, NgModule} from '@angular ...

angular

Experimenting with an Angular 2 component using a simulated service

Currently, I am experimenting with testing an Angular2 component that relies on a service. In order to conduct the test effectively, I aim to provide a stubbed service. However, it appears that the test component does not recognize this stubbed service. ...

angularunit-testingmockingkarma-jasmine

Mapping a JSON array within a static method in Angular2 and TypeScript

Struggling with the syntax to properly map my incoming data in a static method. The structure of my json Array is as follows: [ { "documents": [ { "title": "+1 (film)", "is-saved": false, ...

arraysjsonangulartypescriptmapping

Guide to removing selected value from a combobox in Angular

I am working on a simple HTML file that consists of one combobox and one clear button. I want the clear button to remove the selected value from the combobox when clicked. Below is my code: mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayou ...

javascripthtmlangulartypescript

Tips for preventing the exposure of internal components in Angular

Imagine an OutlookBarComponent that contains various bars similar to those seen in Microsoft Outlook. Each bar has a child component called OutlookBarItemComponent. Both the OutlookBarComponent and OutlookBarItemComponent are encapsulated within the Contro ...

angular

What are the pros and cons of defining `[defaultColor]="'violet'"` in Angular 2?

If you visit the advanced section of angular.io documentation, you will come across the following code snippet: <p [myHighlight]="color" [defaultColor]="'violet'"> Highlight me too! </p> It made me wonder, when binding to a consta ...

angularangular2-directivesangular2-databinding

Upon initial page load, the distinctUntilChanged() function will not be triggered

Upon loading a page, I initiate the following method and utilize the returned list in a dropdown menu. The tap and switchMap functions are run as expected, however, the distinctUntilChanged function does not execute upon page load. Once the page is loade ...

angularuser-interfacerxjsobservable

Retrieving Response Status Codes with Angular 4 and Express

When making GET requests to an Express REST API, I am setting res.status to 200 and returning data. However, in Angular, the response contains the data, but response.status always returns undefined. [UPDATE START] After trying Martin Adámek's sugge ...

angularresthttpexpress

What is the most effective method for importing the "exceljs" library into an Angular project?

In my Angular 7 app, I am utilizing exceljs (https://www.npmjs.com/package/exceljs) to handle importing and exporting of Excel files. Currently, I have imported it using the following code snippet: import {Workbook} from "exceljs";. While it functions perf ...

angularnpmimportangular7exceljs

Is it possible to align the radio-button label above the radio-button in Angular Material 2?

Currently, I am utilizing angular material 2 (material.io) and attempting to position the label of the md-radio-button above the radio button itself. Here's an illustration: View Radio Buttons The official documentation mentions that you can easily ...

javascriptangularflexboxangular-material2angular-flex-layout

Injecting Variables Into User-Defined Button

Presenting a custom button with the following code snippet: export default function CustomButton(isValid: any, email: any) { return ( <Button type="submit" disabled={!isValid || !email} style={{ ...

javascriptreactjstypescriptbuttonmaterial-ui

It is not necessary to specify a generic type on a Typescript class

When working with Typescript and default compiler options, there are strict rules in place regarding null values and uninitialized class attributes in constructors. However, with generics, it is possible to define a generic type for a class and create a ne ...

typescriptclassgenerics

Discovering the JavaScript source file for a package using WebStorm and TypeScript

In my TypeScript project, there is a usage of Express with the following method: response.send('Hello'); I am interested in exploring the implementation of the send() method. However, when I try to navigate to the source code by ctrl+clicking o ...

typescriptwebstorm

How can I dispatch multiple actions simultaneously within a single epic using redux-observable?

I am a newcomer to rxjs/redux observable and have two goals in mind: 1) enhance this epic to follow best practices 2) dispatch two actions from a single epic Many of the examples I've come across assume that the API library will throw an exception ...

reactjstypescriptrxjsredux-observable