Angular Bootstrap Google Maps

Angular Google Maps - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

As of July 16, 2018, an API Key is required to obtain this Google Maps feature. Click here to get an API Key

Angular Bootstrap Google Maps are the most advanced online maps in the world. Their uses are practically limitless.

They are mostly used on contact and about pages to increase the awareness of your location.

It's quite easy to implement a Google map in your project since all it requires is a small piece of JS code.

Examples of Angular Bootstrap Google Maps use include:

  • A travelling blog with map of every journey
  • Contact page
  • An about section with your location

See the following Angular Bootstrap Google maps examples:

Basic Example 

        
            
              <agm-map [latitude]="map.lat" [longitude]="map.lng" style="height: 300px">
                <agm-marker [latitude]="map.lat" [longitude]="map.lng"></agm-marker>
              </agm-map>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'map-example',
                templateUrl: 'map.html',
              })
              export class MapComponent {
                map: any = { lat: 51.678418, lng: 7.809007 };
              }

Dynamically adding markers on the map 

        
            
              <agm-map [latitude]="latitude" [longitude]="longitude" style="height: 300px" (mapClick)="placeMarker($event)">
                <agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude"></agm-marker>
              </agm-map>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'dynamic-markers',
                templateUrl: './dynamic-markers.component.html',
                styleUrls: ['./dynamic-markers.component.scss'],
              })
              export class DynamicMarkersComponent {
                longitude = 20.728218;
                latitude = 52.128973;

                markers = [
                  { latitude: 52.228973, longitude: 20.728218 }
                ];

                placeMarker(position: any) {
                  const lat = position.coords.lat;
                  const lng = position.coords.lng;
                  this.markers.push({ latitude: lat, longitude: lng });
                }
              }

Tooltip with agm-info-window 

        
            
              <agm-map [latitude]="latitude" [longitude]="longitude" style="height: 300px" (mapClick)="placeMarker($event)">
                <agm-marker (mouseOver)="window.open()" (mouseOut)="window.close()" *ngFor="let marker of markers" [latitude]="marker.latitude"
                  [longitude]="marker.longitude">
                  <agm-info-window #window>
                    <h6>Longitude: {{marker.longitude}}</h6>
                    <h6>Latitude: {{marker.latitude}}</h6>
                  </agm-info-window>
                </agm-marker>
              </agm-map>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'agm-info-window',
                templateUrl: './agm-info-window.component.html',
                styleUrls: ['./agm-info-window.component.scss'],
              })
              export class AgmInfoWindowComponent {
                longitude = 20.728218;
                latitude = 52.128973;

                markers = [
                { latitude: 52.228973, longitude: 20.728218 }
                ];

                placeMarker(position: any) {
                  const lat = position.coords.lat;
                  const lng = position.coords.lng;
                  this.markers.push({ latitude: lat, longitude: lng });
                }
              }

Map types

The input [mapTypeId] is responsible for the change of the map type and takes the values of the string type. Possible types are: roadmap (default), satellite, hybrid, terrain. 

        
            
              <agm-map [latitude]="latitude" [longitude]="longitude" style="height: 300px">
                <agm-marker [latitude]="latitude" [longitude]="longitude" [mapTypeId]="'hybrid'"></agm-marker>
              </agm-map>
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({
                selector: 'map-types',
                templateUrl: './map-types.component.html',
                styleUrls: ['./map-types.component.scss'],
              })
              export class MapTypesComponent {
                longitude = 20.728218;
                latitude = 52.128973;
              }

Angular Google Maps - API

In this section you will find informations about required modules and available inputs of forms component.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
          import { ButtonsModule, InputsModule } from 'ng-uikit-pro-standard'
        
        
    
        
            
          import { ButtonsModule, InputsModule } from 'angular-bootstrap-md'
        
        
    
        
            
          import { AgmCoreModule } from '@agm/core'
Import example Modules list

Add AgmCoreModule.forRoot({ apiKey: 'your key here' }) in the imports declarations, in the app.module.ts file to see the map (get an API key here).

        
            
            npm i --save @agm/core
          
        
    
        
            
            import { AgmCoreModule } from '@agm/core'
          
        
    
        
            
            @NgModule({
              imports: [
                AgmCoreModule.forRoot({
                  apiKey: 'your key here'
                })
              ],
            })

Inputs

Name Type Default Description Example
clickableIcons boolean true When false, map icons are not clickable. A map icon represents a point of interest, also known as a POI. By default map icons are clickable. [clickableIcons]="false"
disableDefaultUI boolean false Enables/disables all default UI of the Google map. Please note: When the map is created, this value cannot get updated. [disableDefaultUI]="true"
disableDoubleClickZoom boolean false Enables/disables zoom and center on double click. Enabled by default. [disableDoubleClickZoom]="true"
draggableCursor string The name or url of the cursor to display when mousing over a draggable map. This property uses the css * cursor attribute to change the icon. As with the css property, you must specify at least one fallback cursor that is not a URL. For example: [draggableCursor]="'url(http://www.example.com/icon.webp), auto;'" [draggableCursor]="'url(http://www.example.com/icon.webp), auto;'"
draggingCursor string The name or url of the cursor to display when the map is being dragged. This property uses the css cursor attribute to change the icon. As with the css property, you must specify at least one fallback cursor that is not a URL. For example: [draggingCursor]="'url(http://www.example.com/icon.webp), auto;'"
fitBounds LatLngBoundsLiteral | LatLngBounds Sets the viewport to contain the given bounds. [ fitBounds]="{}"
fullscreenControl boolean false The initial enabled/disabled state of the Fullscreen control. [fullscreenControl]="true"
fullscreenControlOptions FullscreenControlOptions Options for the Fullscreen control. [ fullscreenControlOptions]="{}"
gestureHandling "cooperative" | "greedy" | "none" | "auto" 'auto' This setting controls how gestures on the map are handled. Allowed values:
  • 'cooperative' (Two-finger touch gestures pan and zoom the map. One-finger touch gestures are not handled by the map.)
  • 'greedy' (All touch gestures pan or zoom the map.)
  • 'none' (The map cannot be panned or zoomed by user gestures.)
  • 'auto' [default] (Gesture handling is either cooperative or greedy, depending on whether the page is scrollable or not.
 [ gestureHandling]="'none'"
keyboardShortcuts boolean true If false, prevents the map from being controlled by the keyboard. Keyboard shortcuts are enabled by default. [keyboardShortcuts]="false"
latitude number 0 The latitude that defines the center of the map. [latitude]="0"
longitude number 0 The longitude that defines the center of the map. [longitude]="0"
mapDraggable boolean true Enables/disables if map is draggable. [mapDraggable]="true"
mapTypeControl boolean false The initial enabled/disabled state of the Map type control. [mapTypeControl]="true"
mapTypeControlOptions MapTypeControlOptions Options for the Map type control. [mapTypeControlOptions]="{}"
mapTypeId "roadmap" | "hybrid" | "satellite" | "terrain" | string 'roadmap' The map mapTypeId. Defaults to 'roadmap'. [mapTypeId]="'roadmap'"
maxZoom number The maximal zoom level of the map allowed. When not provided, no restrictions to the zoom level are enforced. [maxZoom]="10"
minZoom number The minimum zoom level of the map allowed. When not provided, no restrictions to the zoom level are enforced. [minZoom]="10"
panControl boolean false The initial enabled/disabled state of the Pan control. [panControl]="10"
panControlOptions PanControlOptions Options for the Pan control. [panControlOptions]="{}"
rotateControl boolean false The initial enabled/disabled state of the Rotate control. [rotateControl]="false"
rotateControlOptions RotateControlOptions Options for the Rotate control. [rotateControlOptions]="{}"
scaleControl boolean false The initial enabled/disabled state of the Scale control. This is disabled by default. [scaleControl]="true"
scaleControlOptions ScaleControlOptions Options for the scale control. [scaleControlOptions]="{}"
scrollwheel boolean true If false, disables scrollwheel zooming on the map. The scrollwheel is enabled by default. [scrollwheel]="{}"
streetViewControl boolean true The initial enabled/disabled state of the Street View Pegman control. This control is part of the default UI, and should be set to false when displaying a map type on which the Street View road overlay should not appear (e.g. a non-Earth map type). [streetViewControl]="true"
streetViewControlOptions StreetViewControlOptions {} Options for the Street View control. [streetViewControlOptions]="{}"
styles MapTypeStyle[] [] Styles to apply to each of the default map types. Note that for Satellite/Hybrid and Terrain modes, these styles will only apply to labels and geometry. [styles]="[]"
usePanning boolean false When true and the latitude and/or longitude values changes, the Google Maps panTo method is used to center the map. See: https://developers.google.com/maps/documentation/javascript/reference#Map [usePanning]="true"
zoom number 8 The zoom level of the map. The default zoom level is 8. [zoom]="10"
zoomControl boolean true The enabled/disabled state of the Zoom control. [zoomControl]="false"
zoomControlOptions ZoomControlOptions Options for the Zoom control. [zoomControlOptions]="{}"