Integrating Info Windows On Google Maps In Angular App

Introduction

In the last post, we have seen how we can integrate google map in our Angular application. <agm-map> and <agm-marker> give our map nice look and feel with different zoom and map controls. 
To extend the map functionality, we can have information windows on our map which will provide additional information, show relevant messages or details, show some fancy design template for better user-interaction. We can design info windows to integrate with our google maps inside Angular application. We will do this using the AgmSnazzyInfoWindowModule package which is designed for designing customized info windows for maps. It will use the Google Maps Javascript API. There are many features which come with Snazzy Windows which are:


  • Responsive Design Windows - These windows are responsive according to different screen and map sizes. The user-interface supports different sizes. 
  • Styling - We can provide our own styles using different input properties such as background color, border, padding, font-size, color, etc.
  • Placement - We can place these info windows anywhere around the marker such as top, left, right, bottom.
  • Control - We have full control over these snazzy windows as we have a variety of options like when to show these windows, closing them on map click, etc.
  • Dynamic content - It supports dynamic content as well after initialization.

AgmSnazzyInfoWindowModule 

AGM Snazzy Window is an extension of agm/core module that provides us a solution for stylish customized info windows. We can use this package with @agm/core. 

Installation

Write the below command to install the package.

npm install @agm/snazzy-info-window snazzy-info-window --save

This will install and save the package in the package.json file as well. Go to the app.module.ts file and import the module.


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core';
import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: ['YOUR_API_KEY_HERE']
    }),
    AgmSnazzyInfoWindowModule  // Make entry here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Load the CSS of Snazzy Window

We can make the entry for the CSS file angular-cli.json file as follows. Go to styles array and make the entry for the CSS file.

  "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "../node_modules/@swimlane/ngx-datatable/release/themes/material.css",
      "assets/material-theme.scss",
      "styles.scss",
      "../node_modules/snazzy-info-window/dist/snazzy-info-window.css",
    ],

Using <agm-snazzy-info-window>

We will first see only the <agm-snazzy-info-window> with different options used:

<agm-snazzy-info-window *ngIf="showBubbleMarker" [maxWidth]="200" [shadow]="true" padding="12px"  [latitude]="site.latitude" [longitude]="site.longitude" backgroundColor="#fff"  fontSize="12px"  fontColor="#757575"  wrapperClass="customClass"  [showCloseButton]="false" [isOpen]="true" [panOnOpen]="false"  [closeWhenOthersOpen]="false" [closeOnMapClick]="false">
<ng-template>
<div>My Snazzy Info Window</div>
</ng-template>
</agm-snazzy-info-window>

We can see the different properties we can define with the info window. Some define below which we used in the above example. For full documentation regarding the agm-snazzy-info-window refer documentation here.
CSS Related Input Properties

  • maxWidth - We will define the max-width for our window using this input property.
  • shadow - The CSS property for the window. By default, we have value for this property. Set to false to remove the shadow from the window.
  • padding - This is the padding around the content of the window. 
  • backgroundColor - Define the background color. Any color or hex-code is allowed.
  • fontSize - The font-size for the content inside the window.
  • fontColor - The color for the information mentioned.
Other Input Property
  • showCloseButton - As the name indicates, this property show or hide the close button on the information window.
  • closeWhenOthersOpen - This property corresponds to other snazzy windows. If true, this window will close when other windows are open.
We can define our own customized design and layout for the snazzy window using <ng-template>. Even we can use wrapper class property called wrapperClass to define any custom CSS for the window. wrapperClass is the class that applies styles to the container of the info window.

We will see an example of different AGM components to see an info window on the map.

    <agm-map #agmMap [latitude]="lat" [longitude]="lng" [fullscreenControl]='false' [mapTypeControl]='false'
      [streetViewControl]="false" [styles]="styles" [zoom]="zoom" [maxZoom]="maxZoom">
        
           <agm-marker [latitude]="site.latitude" [longitude]="site.longitude"
          iconUrl="URL" (markerClick)="onMarkerClicked(site)">

          <agm-snazzy-info-window *ngIf="showBubbleMarker" [maxWidth]="200" [shadow]="true" 
             padding="12px"  [latitude]="lat" [longitude]="lng" backgroundColor="#fff" 
             fontSize="12px"  fontColor="#757575" wrapperClass="customClass" [showCloseButton]="false" 
             [isOpen]="true" [panOnOpen]="false" [closeWhenOthersOpen]="false" [closeOnMapClick]="false">
          </agm-snazzy-info-window>
            <ng-template>
                  <div>My Snazzy Info Window</div>
           </ng-template>
          </agm-marker>
     </agm-map>

Comments

  1. I'm more than happy to find this page. I wanted to thank you for your time for this wonderful read!! I definitely enjoyed every bit of it and I have you bookmarked to check out new things in your informative web site.

    ReplyDelete
    Replies
    1. Thankyou for your time for reading my blog and giving useful feedback.

      Delete
  2. After looking over a handful of the blog posts on your blog, I seriously like your way of blogging. I saved as a favorite it to my bookmark website subject list and will be checking back soon. Please visit my web site too and tell me what you think.

    ReplyDelete
  3. Nice! you are sharing such helpful and easy to understandable blog. i have no words for say i just say thanks because it is helpful for me


    Dot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery






    ReplyDelete
  4. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. Thanks for sharing the useful information.


    Distance Matrix API
    Google Maps API Alternative

    ReplyDelete

Post a Comment