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:
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
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.
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>
Great blog, I was searching this for a while. Do post more like this.
ReplyDeleteAngularJS Training in Chennai
Angular 4 Training in Chennai
Angular 5 Training in Chennai
Angular Training in Chennai
React JS Training in Chennai
PHP course in Chennai
Web Designing Training in Chennai
React JS Training in Chennai
AngularJS Training in Vadapalani
Angular course in Chennai
Thanks for sharing this blog, this blog is more useful to me.
ReplyDeletePHP Training in Bangalore
PHP Training in Chennai
PHP Classes in Bangalore
Best PHP Training Institute in Bangalore
AWS Training in Bangalore
Data Science Courses in Bangalore
DevOps Training in Bangalore
Spoken English Classes in Bangalore
DOT NET Training in Bangalore
Valuable one...thanks for sharing...
ReplyDeleteDOT NET Training in Chennai
.net coaching centre in chennai
.Net training in chennai
DOT NET Course in Chennai
dot net training in anna nagar
Html5 Training in Chennai
Spring Training in Chennai
Struts Training in Chennai
Wordpress Training in Chennai
SAS Training in Chennai
ReplyDeleteReally awesome blog. Your blog is really useful for me. Thanks for sharing this informative blog.
Software Testing Training in Chennai
Software Testing Training in Bangalore
Software Testing Course in Coimbatore
Software Testing Training in Madurai
Software Testing Training Institute in Bangalore
Software Testing Course in Bangalore
Testing Course in Bangalore
Ethical hacking course in bangalore
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.
ReplyDeleteThankyou for your time for reading my blog and giving useful feedback.
DeleteAfter 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.
ReplyDeleteNice! 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
ReplyDeleteDot 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
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.
ReplyDeleteDistance Matrix API
Google Maps API Alternative
I would definitely thank the admin of this blog for sharing this information with us. Waiting for more updates from this blog admin.
ReplyDeleteangular js training in chennai
angular js online training in chennai
angular js training in bangalore
angular js training in hyderabad
angular js training in coimbatore
angular js training
angular js online training
Hi Aanchal,
ReplyDeleteThis article helped me.
Thanks
Hello Ravikanth.
DeleteThanks for checking out.