Rate this docs

Angular Bootstrap Google Maps

Angular Google Maps - Bootstrap 4 & Material Design

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

Angular Bootstrap Google Maps are the most advanced online maps in the world. Their use is practically infinite.

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

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

Examples of Angular Bootstrap Google Maps use:

  • Traveling blog with map of every journey
  • Contact page
  • 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 {
            public 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, OnInit } from '@angular/core';

            @Component({
            selector: 'dynamic-markers',
            templateUrl: './dynamic-markers.component.html',
            styleUrls: ['./dynamic-markers.component.scss'],
            })
            export class DynamicMarkersComponent implements OnInit {

            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.

// MDB Angular Pro
import { ButtonsModule, InputsModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { ButtonsModule, InputsModule } from 'angular-bootstrap-md'
// Angular Google Maps
import { AgmCoreModule } from '@agm/core'

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
          
        
// For MDB Angular Pro
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.png), auto;'" [draggableCursor]="'url(http://www.example.com/icon.png), 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.png), 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]="{}"