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>