Using angular google maps in Dashboard Layout.

[Ravi]

Hi, I am using angular version 7 and I want to use google maps in the dashboard layout. I have been using angular google maps for the same and it has been very efficient. I also explored the map control from syncfusion but could not find any relevant way of using google maps with map control. The map's maximum zoom level is way less than expected in my project. My project requires the map to zoom to the street level (i.e the user must be able to zoom in and read the street name). I just need an example on how can I use angular google maps with the dashboard layout since everytime I render the angular google map in the dashboard layout, it keeps on re-rendering itself and the windows hangs. There are no errors on the console, so I believe there is some internal issue in the dashboard layout or some configuration that I have missed. I would appreciate a simple example on how I can intergrate https://angular-ui.github.io/angular-google-maps/#!/ in dashboard layout. 

Thanks.

[Sowmiya Padmanaban]

Hi Ravi,  

  

Greetings from Syncfusion support. 

  

We have validated your requirement that you need to render the google maps as a DashboardLayout panel content. Yes, it is possible to render the google maps using Map component. To achieve your requirement we have created a sample for the google maps using the “OSM” in Maps that is rendered inside the Dashboard Layout panel content with your specified angular version 7. 

  

Refer the sample link below. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion-angular-app693070641.zip 

  

Similarly, you can render any component (Chart, Grid ) as a DashboardLayout panel content. Refer the below link. 

https://ej2.syncfusion.com/angular/documentation/dashboard-layout/panels/setting-header-of-panels/ 

  

Refer the below link to know more the DashboardLayout component. 

  

UG Documentation –https://ej2.syncfusion.com/angular/documentation/dashboard-layout/getting-started/ 

  

Sample link –https://ej2.syncfusion.com/angular/demos/#/material/dashboard-layout/default/ 

  

API Reference-https://ej2.syncfusion.com/angular/documentation/api/dashboard-layout/ 

  

Can you please ensure the above sample, please let us know, it meets your requirement or not. If we misunderstood your requirement. Can you please share the exact requirement of your scenario. We will provide the solution at the earliest. 

  

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Ravi]

Hi,

Thanks a lot for the reply. But in the example given above, the zoom functionality does not seem to work and also there is a worldmap file from where the map draws its shapes which is not what I am looking for. I wish to use AGM(angular google maps) reference link--> https://angular-ui.github.io/angular-google-maps/ in the dashboard layout and not the map control from syncfusion. Angular google maps is a different module altogether. We wish to use it since we have been using it already and it fits our use case really well. But we now want to add it as a widget for which we are using the dashboard layout from syncfusion. Kindly share an example which could demonstrate integration of angular google maps in the dashboard layout. I tried using the said module with the dashboard layout of syncfusion. But as I said, the widget in which I render the map using AGM keeps re-rendering and the window hangs. 

[Sowmiya Padmanaban]

  

Hi Ravi,  

We have validated  your requirement to render the AGM google maps inside the DashboardLayout component. Yes, it is possible to render inside the DashboardLayout panel content. We have also checked your reported case that zooming functionality in AGM google maps is not working. But it works properly in our sample. We have ensured this case in our sample application. 

Refer the below code snippet to render the AGM Google maps inside the DashboardLayout panel content. 

          <ejs-dashboardlayout id='editLayout' [columns]="6" #editLayout [allowResizing]="allowResizing" [allowDragging]="allowDragging" > 

            <e-panels> 

              <e-panel [sizeX]="2" [sizeY]="1" [row]="0" [col]="0"> 

                 <ng-template #header> 

                  <div>Google Maps</div> 

                </ng-template> 

                <ng-template #content> 

                  <div class="card" style="height:100%;width:100%;"> 

                    <div class="container"style="height:100%;width:100%;"> 

                        <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom" [usePanning]='true' (mapReady)="mapReady($event)"   

                    > 

                          <agm-marker [latitude]="latitude" [longitude]="longitude"  iconUrl="http://maps.google.com/mapfiles/ms/icons/blue-dot.png"></agm-marker> 

                        </agm-map> 

                      </div>  

                  </div> 

                </ng-template> 

              </e-panel> 

            </e-panels> 

          </ejs-dashboardlayout> 

Refer the below screenshot. 

 

Refer the sample link below. 

https://stackblitz.com/edit/angular-agm-maps-b4syrh?file=src%2Fapp%2Fapp.component.html 

If the issue still persist, can you please share the below details. It will help us to resolve your problem at the earliest. 

1.      Share the video footage of the issue which you are facing in your application. 

2.      Code snippet for rendering the  components. 

3.      If possible, reproduce the issue in attached sample. 

4.      In which browser, are you using  to run the application? 

Please let us know, if you need any further assistance. 

Regards,  

Sowmiya.P