SebmGoogleMap - TypeScript

SebMGoogleMap renders a Google Map. Important note: To be able see a map in the browser, you have to define a height for the CSS class sebm-google-map-container.

Example

import { Component } from '@angular/core';
import { SebmGoogleMap } from 'angular2-google-maps/core';

@Component({
 selector: 'my-map-cmp',
 directives: [SebmGoogleMap],
 styles: [`
   .sebm-google-map-container {
     height: 300px;
   }
`],
 template: `
   <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
   </sebm-google-map>
 `
})

Selectors

  • sebm-google-map

Inputs

  • longitude bound to SebmGoogleMap.longitude

    The longitude that defines the center of the map.

  • latitude bound to SebmGoogleMap.latitude

    The latitude that defines the center of the map.

  • zoom bound to SebmGoogleMap.zoom

    The zoom level of the map. The default zoom level is 8.

  • mapDraggable bound to SebmGoogleMap.draggable

    Enables/disables if map is draggable.

  • disableDoubleClickZoom bound to SebmGoogleMap.disableDoubleClickZoom

    Enables/disables zoom and center on double click. Enabled by default.

  • disableDefaultUI bound to SebmGoogleMap.disableDefaultUI

    Enables/disables all default UI of the Google map. Please note: When the map is created, this

    cannot get updated.
  • scrollwheel bound to SebmGoogleMap.scrollwheel

    If false, disables scrollwheel zooming on the map. The scrollwheel is enabled by default.

  • backgroundColor bound to SebmGoogleMap.backgroundColor

    Color used for the background of the Map div. This color will be visible when tiles have not

    loaded as the user pans. This option can only be set when the map is initialized.
  • draggableCursor bound to SebmGoogleMap.draggableCursor

    The name or url of the cursor to display when mousing over a draggable map. This property uses

    css * cursor attribute to change the icon. As with the css property, you must specify atone fallback cursor that is not a URL. For example:[draggableCursor]="'url(http://www.example.com/icon.png), auto;'"
  • draggingCursor bound to SebmGoogleMap.draggingCursor

    The name or url of the cursor to display when the map is being dragged. This property uses the

    cursor attribute to change the icon. As with the css property, you must specify at leastfallback cursor that is not a URL. For example:[draggingCursor]="'url(http://www.example.com/icon.png), auto;'"
  • keyboardShortcuts bound to SebmGoogleMap.keyboardShortcuts

    If false, prevents the map from being controlled by the keyboard. Keyboard shortcuts are

    by default.
  • zoomControl bound to SebmGoogleMap.zoomControl

    The enabled/disabled state of the Zoom control.

  • styles bound to SebmGoogleMap.styles

    Styles to apply to each of the default map types. Note that for Satellite/Hybrid and Terrain

    , these styles will only apply to labels and geometry.
  • usePanning bound to SebmGoogleMap.usePanning

    When true and the latitude and/or longitude values changes, the Google Maps panTo method is

    to
    the map. See: https://developers.google.com/maps/documentation/javascript/reference#Map
  • streetViewControl bound to SebmGoogleMap.streetViewControl

    The initial enabled/disabled state of the Street View Pegman control.

    control is part of the default UI, and should be set to false when displaying a map typewhich the Street View road overlay should not appear (e.g. a non-Earth map type).
  • fitBounds bound to SebmGoogleMap.fitBounds

    Sets the viewport to contain the given bounds.

  • scaleControl bound to SebmGoogleMap.scaleControl

    The initial enabled/disabled state of the Scale control. This is disabled by default.

  • mapTypeControl bound to SebmGoogleMap.mapTypeControl

    The initial enabled/disabled state of the Map type control.

Outputs

  • mapClick bound to SebmGoogleMap.mapClick

    This event emitter gets emitted when the user clicks on the map (but not when they click on a

    or infoWindow).
  • mapRightClick bound to SebmGoogleMap.mapRightClick

    This event emitter gets emitted when the user right-clicks on the map (but not when they click

    a marker or infoWindow).
  • mapDblClick bound to SebmGoogleMap.mapDblClick

    This event emitter gets emitted when the user double-clicks on the map (but not when they click

    a marker or infoWindow).
  • centerChange bound to SebmGoogleMap.centerChange

    This event emitter is fired when the map center changes.

  • idle bound to SebmGoogleMap.idle

    This event is fired when the map becomes idle after panning or zooming.

  • boundsChange bound to SebmGoogleMap.boundsChange

    This event is fired when the viewport bounds have changed.

  • zoomChange bound to SebmGoogleMap.zoomChange

    This event is fired when the zoom level has changed.

Constructor

  • constructor(_elem: ElementRef, _mapsWrapper: GoogleMapsAPIWrapper)

    Not Yet Documented

Members

  • longitude : number
    

    The longitude that defines the center of the map.

  • latitude : number
    

    The latitude that defines the center of the map.

  • zoom : number
    

    The zoom level of the map. The default zoom level is 8.

  • draggable : boolean
    

    Enables/disables if map is draggable.

  • disableDoubleClickZoom : boolean
    

    Enables/disables zoom and center on double click. Enabled by default.

  • disableDefaultUI : boolean
    

    Enables/disables all default UI of the Google map. Please note: When the map is created, this value cannot get updated.

  • scrollwheel : boolean
    

    If false, disables scrollwheel zooming on the map. The scrollwheel is enabled by default.

  • backgroundColor : string
    

    Color used for the background of the Map div. This color will be visible when tiles have not yet loaded as the user pans. This option can only be set when the map is initialized.

  • 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;'"

  • 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;'"

  • keyboardShortcuts : boolean
    

    If false, prevents the map from being controlled by the keyboard. Keyboard shortcuts are enabled by default.

  • zoomControl : boolean
    

    The enabled/disabled state of the Zoom control.

  • 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.

  • usePanning : boolean
    

    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

  • streetViewControl : boolean
    

    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).

  • fitBounds : LatLngBoundsLiteral|LatLngBounds
    

    Sets the viewport to contain the given bounds.

  • scaleControl : boolean
    

    The initial enabled/disabled state of the Scale control. This is disabled by default.

  • mapTypeControl : boolean
    

    The initial enabled/disabled state of the Map type control.

  • mapClick : EventEmitter<MouseEvent>
    

    This event emitter gets emitted when the user clicks on the map (but not when they click on a marker or infoWindow).

  • mapRightClick : EventEmitter<MouseEvent>
    

    This event emitter gets emitted when the user right-clicks on the map (but not when they click on a marker or infoWindow).

  • mapDblClick : EventEmitter<MouseEvent>
    

    This event emitter gets emitted when the user double-clicks on the map (but not when they click on a marker or infoWindow).

  • centerChange : EventEmitter<LatLngLiteral>
    

    This event emitter is fired when the map center changes.

  • boundsChange : EventEmitter<LatLngBounds>
    

    This event is fired when the viewport bounds have changed.

  • idle : EventEmitter<void>
    

    This event is fired when the map becomes idle after panning or zooming.

  • zoomChange : EventEmitter<number>
    

    This event is fired when the zoom level has changed.

  • ngOnChanges(changes: {[propName: string]: SimpleChange})
    

    Not Yet Documented

  • triggerResize() : Promise<void>
    

    Triggers a resize event on the google map instance. Returns a promise that gets resolved after the event was triggered.


exported from core/index defined in core/directives/google-map.ts (line 12)