angular2-google-maps

angular2-google-maps

Version 0.17.0
Published 7 years ago
No dependencies
MIT license

Install

npm i angular2-google-maps

yarn add angular2-google-maps

pnpm add angular2-google-maps

Overview

Angular 2 components for Google Maps

Index

Variables

variable LAZY_MAPS_API_CONFIG

const LAZY_MAPS_API_CONFIG: any;

Token for the config of the LazyMapsAPILoader. Please provide an object of type LazyMapsAPILoaderConfig.

Classes

class AgmCoreModule

@NgModule({ declarations: coreDirectives(), exports: coreDirectives() })
export class AgmCoreModule {}

The angular2-google-maps core module. Contains all Directives/Services/Pipes of the core module. Please use AgmCoreModule.forRoot() in your app module.

method forRoot

static forRoot: (
    lazyMapsAPILoaderConfig?: LazyMapsAPILoaderConfigLiteral
) => ModuleWithProviders;

Please use this method when you register the module at the root level.

class CircleManager

@Injectable()
export class CircleManager {}

constructor

constructor(_apiWrapper: GoogleMapsAPIWrapper, _zone: NgZone);

method addCircle

addCircle: (circle: SebmGoogleMapCircle) => void;

method createEventObservable

createEventObservable: <T>(
    eventName: string,
    circle: SebmGoogleMapCircle
) => Observable<T>;

method getBounds

getBounds: (circle: SebmGoogleMapCircle) => Promise<mapTypes.LatLngBounds>;

method getCenter

getCenter: (circle: SebmGoogleMapCircle) => Promise<mapTypes.LatLng>;

method getRadius

getRadius: (circle: SebmGoogleMapCircle) => Promise<number>;

method removeCircle

removeCircle: (circle: SebmGoogleMapCircle) => Promise<void>;

Removes the given circle from the map.

method setCenter

setCenter: (circle: SebmGoogleMapCircle) => Promise<void>;

method setDraggable

setDraggable: (circle: SebmGoogleMapCircle) => Promise<void>;

method setEditable

setEditable: (circle: SebmGoogleMapCircle) => Promise<void>;

method setOptions

setOptions: (
    circle: SebmGoogleMapCircle,
    options: mapTypes.CircleOptions
) => Promise<void>;

method setRadius

setRadius: (circle: SebmGoogleMapCircle) => Promise<void>;

method setVisible

setVisible: (circle: SebmGoogleMapCircle) => Promise<void>;

class GoogleMapsAPIWrapper

@Injectable()
export class GoogleMapsAPIWrapper {}

Wrapper class that handles the communication with the Google Maps Javascript API v3

constructor

constructor(_loader: MapsAPILoader, _zone: NgZone);

method containsLocation

containsLocation: (
    latLng: mapTypes.LatLngLiteral,
    polygon: mapTypes.Polygon
) => Promise<boolean>;

Determines if given coordinates are insite a Polygon path.

method createCircle

createCircle: (options: mapTypes.CircleOptions) => Promise<mapTypes.Circle>;

Creates a google.map.Circle for the current map.

method createInfoWindow

createInfoWindow: (
    options?: mapTypes.InfoWindowOptions
) => Promise<mapTypes.InfoWindow>;

method createMap

createMap: (el: HTMLElement, mapOptions: mapTypes.MapOptions) => Promise<void>;

method createMarker

createMarker: (options?: mapTypes.MarkerOptions) => Promise<mapTypes.Marker>;

Creates a google map marker with the map context

method createPolygon

createPolygon: (options: mapTypes.PolygonOptions) => Promise<mapTypes.Polyline>;

method createPolyline

createPolyline: (options: PolylineOptions) => Promise<Polyline>;

method fitBounds

fitBounds: (
    latLng: mapTypes.LatLngBounds | mapTypes.LatLngBoundsLiteral
) => Promise<void>;

method getBounds

getBounds: () => Promise<mapTypes.LatLngBounds>;

method getCenter

getCenter: () => Promise<mapTypes.LatLng>;

method getNativeMap

getNativeMap: () => Promise<mapTypes.GoogleMap>;

Returns the native Google Maps Map instance. Be careful when using this instance directly.

method getZoom

getZoom: () => Promise<number>;

method panTo

panTo: (latLng: mapTypes.LatLng | mapTypes.LatLngLiteral) => Promise<void>;

method panToBounds

panToBounds: (
    latLng: mapTypes.LatLngBounds | mapTypes.LatLngBoundsLiteral
) => Promise<void>;

method setCenter

setCenter: (latLng: mapTypes.LatLngLiteral) => Promise<void>;

method setMapOptions

setMapOptions: (options: mapTypes.MapOptions) => void;

method setZoom

setZoom: (zoom: number) => Promise<void>;

method subscribeToMapEvent

subscribeToMapEvent: <E>(eventName: string) => Observable<E>;

method triggerMapEvent

triggerMapEvent: (eventName: string) => Promise<void>;

Triggers the given event name on the map instance.

class InfoWindowManager

@Injectable()
export class InfoWindowManager {}

constructor

constructor(
    _mapsWrapper: GoogleMapsAPIWrapper,
    _zone: NgZone,
    _markerManager: MarkerManager
);

method addInfoWindow

addInfoWindow: (infoWindow: SebmGoogleMapInfoWindow) => void;

method close

close: (infoWindow: SebmGoogleMapInfoWindow) => Promise<void>;

method createEventObservable

createEventObservable: <T>(
    eventName: string,
    infoWindow: SebmGoogleMapInfoWindow
) => Observable<T>;

Creates a Google Maps event listener for the given InfoWindow as an Observable

method deleteInfoWindow

deleteInfoWindow: (infoWindow: SebmGoogleMapInfoWindow) => Promise<void>;

method open

open: (infoWindow: SebmGoogleMapInfoWindow) => Promise<void>;

method setOptions

setOptions: (
    infoWindow: SebmGoogleMapInfoWindow,
    options: InfoWindowOptions
) => Promise<void>;

method setPosition

setPosition: (infoWindow: SebmGoogleMapInfoWindow) => Promise<void>;

method setZIndex

setZIndex: (infoWindow: SebmGoogleMapInfoWindow) => Promise<void>;

class KmlLayerManager

@Injectable()
export class KmlLayerManager {}

Manages all KML Layers for a Google Map instance.

constructor

constructor(_wrapper: GoogleMapsAPIWrapper, _zone: NgZone);

method addKmlLayer

addKmlLayer: (layer: SebmGoogleMapKmlLayer) => void;

Adds a new KML Layer to the map.

method createEventObservable

createEventObservable: <T>(
    eventName: string,
    layer: SebmGoogleMapKmlLayer
) => Observable<T>;

Creates a Google Maps event listener for the given KmlLayer as an Observable

method deleteKmlLayer

deleteKmlLayer: (layer: SebmGoogleMapKmlLayer) => void;

method setOptions

setOptions: (layer: SebmGoogleMapKmlLayer, options: KmlLayerOptions) => void;

class LazyMapsAPILoader

@Injectable()
export class LazyMapsAPILoader extends MapsAPILoader {}

constructor

constructor(config: any, w: WindowRef, d: DocumentRef);

method load

load: () => Promise<void>;

class MapsAPILoader

@Injectable()
export abstract class MapsAPILoader {}

method load

abstract load: () => Promise<void>;

class MarkerManager

@Injectable()
export class MarkerManager {}

constructor

constructor(_mapsWrapper: GoogleMapsAPIWrapper, _zone: NgZone);

method addMarker

addMarker: (marker: SebmGoogleMapMarker) => void;

method createEventObservable

createEventObservable: <T>(
    eventName: string,
    marker: SebmGoogleMapMarker
) => Observable<T>;

method deleteMarker

deleteMarker: (marker: SebmGoogleMapMarker) => Promise<void>;

method getNativeMarker

getNativeMarker: (marker: SebmGoogleMapMarker) => Promise<Marker>;

method updateDraggable

updateDraggable: (marker: SebmGoogleMapMarker) => Promise<void>;

method updateIcon

updateIcon: (marker: SebmGoogleMapMarker) => Promise<void>;

method updateLabel

updateLabel: (marker: SebmGoogleMapMarker) => Promise<void>;

method updateMarkerPosition

updateMarkerPosition: (marker: SebmGoogleMapMarker) => Promise<void>;

method updateOpacity

updateOpacity: (marker: SebmGoogleMapMarker) => Promise<void>;

method updateTitle

updateTitle: (marker: SebmGoogleMapMarker) => Promise<void>;

method updateVisible

updateVisible: (marker: SebmGoogleMapMarker) => Promise<void>;

method updateZIndex

updateZIndex: (marker: SebmGoogleMapMarker) => Promise<void>;

class NoOpMapsAPILoader

class NoOpMapsAPILoader implements MapsAPILoader {}

When using the NoOpMapsAPILoader, the Google Maps API must be added to the page via a <script> Tag. It's important that the Google Maps API script gets loaded first on the page.

method load

load: () => Promise<void>;

class PolygonManager

@Injectable()
export class PolygonManager {}

constructor

constructor(_mapsWrapper: GoogleMapsAPIWrapper, _zone: NgZone);

method addPolygon

addPolygon: (path: SebmGoogleMapPolygon) => void;

method createEventObservable

createEventObservable: <T>(
    eventName: string,
    path: SebmGoogleMapPolygon
) => Observable<T>;

method deletePolygon

deletePolygon: (paths: SebmGoogleMapPolygon) => Promise<void>;

method setPolygonOptions

setPolygonOptions: (
    path: SebmGoogleMapPolygon,
    options: { [propName: string]: any }
) => Promise<void>;

method updatePolygon

updatePolygon: (polygon: SebmGoogleMapPolygon) => Promise<void>;

class PolylineManager

@Injectable()
export class PolylineManager {}

constructor

constructor(_mapsWrapper: GoogleMapsAPIWrapper, _zone: NgZone);

method addPolyline

addPolyline: (line: SebmGoogleMapPolyline) => void;

method createEventObservable

createEventObservable: <T>(
    eventName: string,
    line: SebmGoogleMapPolyline
) => Observable<T>;

method deletePolyline

deletePolyline: (line: SebmGoogleMapPolyline) => Promise<void>;

method setPolylineOptions

setPolylineOptions: (
    line: SebmGoogleMapPolyline,
    options: { [propName: string]: any }
) => Promise<void>;

method updatePolylinePoints

updatePolylinePoints: (line: SebmGoogleMapPolyline) => Promise<void>;

class SebmGoogleMap

@Component({
    selector: 'sebm-google-map',
    providers: [
        GoogleMapsAPIWrapper,
        MarkerManager,
        InfoWindowManager,
        CircleManager,
        PolylineManager,
        PolygonManager,
        KmlLayerManager,
    ],
    inputs: [
        'longitude',
        'latitude',
        'zoom',
        'minZoom',
        'maxZoom',
        'draggable: mapDraggable',
        'disableDoubleClickZoom',
        'disableDefaultUI',
        'scrollwheel',
        'backgroundColor',
        'draggableCursor',
        'draggingCursor',
        'keyboardShortcuts',
        'zoomControl',
        'styles',
        'usePanning',
        'streetViewControl',
        'fitBounds',
        'scaleControl',
        'mapTypeControl',
    ],
    outputs: [
        'mapClick',
        'mapRightClick',
        'mapDblClick',
        'centerChange',
        'idle',
        'boundsChange',
        'zoomChange',
    ],
    host: { '[class.sebm-google-map-container]': 'true' },
    styles: [
        `
            .sebm-google-map-container-inner {
                width: inherit;
                height: inherit;
            }
            .sebm-google-map-content {
                display: none;
            }
        `,
    ],
    template: `
        <div class="sebm-google-map-container-inner"></div>
        <div class="sebm-google-map-content">
            <ng-content></ng-content>
        </div>
    `,
})
export class SebmGoogleMap implements OnChanges, OnInit, OnDestroy {}

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>
 `
})

constructor

constructor(_elem: ElementRef, _mapsWrapper: GoogleMapsAPIWrapper);

property backgroundColor

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.

property boundsChange

boundsChange: EventEmitter<LatLngBounds>;

This event is fired when the viewport bounds have changed.

property centerChange

centerChange: EventEmitter<LatLngLiteral>;

This event emitter is fired when the map center changes.

property disableDefaultUI

disableDefaultUI: boolean;

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

property disableDoubleClickZoom

disableDoubleClickZoom: boolean;

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

property draggable

draggable: boolean;

Enables/disables if map is draggable.

property draggableCursor

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

property draggingCursor

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

property fitBounds

fitBounds: LatLngBounds | LatLngBoundsLiteral;

Sets the viewport to contain the given bounds.

property idle

idle: EventEmitter<void>;

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

property keyboardShortcuts

keyboardShortcuts: boolean;

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

property latitude

latitude: number;

The latitude that defines the center of the map.

property longitude

longitude: number;

The longitude that defines the center of the map.

property mapClick

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

property mapDblClick

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

property mapRightClick

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

property mapTypeControl

mapTypeControl: boolean;

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

property maxZoom

maxZoom: number;

The maximal zoom level of the map allowed. When not provided, no restrictions to the zoom level are enforced.

property minZoom

minZoom: number;

The minimal zoom level of the map allowed. When not provided, no restrictions to the zoom level are enforced.

property scaleControl

scaleControl: boolean;

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

property scrollwheel

scrollwheel: boolean;

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

property streetViewControl

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

property styles

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.

property usePanning

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

property zoom

zoom: number;

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

property zoomChange

zoomChange: EventEmitter<number>;

This event is fired when the zoom level has changed.

property zoomControl

zoomControl: boolean;

The enabled/disabled state of the Zoom control.

method ngOnChanges

ngOnChanges: (changes: { [propName: string]: SimpleChange }) => void;

method triggerResize

triggerResize: () => Promise<void>;

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

class SebmGoogleMapCircle

@Directive({
    selector: 'sebm-google-map-circle',
    inputs: [
        'latitude',
        'longitude',
        'clickable',
        'draggable: circleDraggable',
        'editable',
        'fillColor',
        'fillOpacity',
        'radius',
        'strokeColor',
        'strokeOpacity',
        'strokePosition',
        'strokeWeight',
        'visible',
        'zIndex',
    ],
    outputs: [
        'centerChange',
        'circleClick',
        'circleDblClick',
        'drag',
        'dragEnd',
        'dragStart',
        'mouseDown',
        'mouseMove',
        'mouseOut',
        'mouseOver',
        'mouseUp',
        'radiusChange',
        'rightClick',
    ],
})
export class SebmGoogleMapCircle implements OnInit, OnChanges, OnDestroy {}

constructor

constructor(_manager: CircleManager);

property centerChange

centerChange: EventEmitter<LatLngLiteral>;

This event is fired when the circle's center is changed.

property circleClick

circleClick: EventEmitter<MouseEvent>;

This event emitter gets emitted when the user clicks on the circle.

property circleDblClick

circleDblClick: EventEmitter<MouseEvent>;

This event emitter gets emitted when the user clicks on the circle.

property clickable

clickable: boolean;

Indicates whether this Circle handles mouse events. Defaults to true.

property drag

drag: EventEmitter<MouseEvent>;

This event is repeatedly fired while the user drags the circle.

property dragEnd

dragEnd: EventEmitter<MouseEvent>;

This event is fired when the user stops dragging the circle.

property draggable

draggable: boolean;

If set to true, the user can drag this circle over the map. Defaults to false.

property dragStart

dragStart: EventEmitter<MouseEvent>;

This event is fired when the user starts dragging the circle.

property editable

editable: boolean;

If set to true, the user can edit this circle by dragging the control points shown at the center and around the circumference of the circle. Defaults to false.

property fillColor

fillColor: string;

The fill color. All CSS3 colors are supported except for extended named colors.

property fillOpacity

fillOpacity: number;

The fill opacity between 0.0 and 1.0.

property latitude

latitude: number;

The latitude position of the circle (required).

property longitude

longitude: number;

The clickable position of the circle (required).

property mouseDown

mouseDown: EventEmitter<MouseEvent>;

This event is fired when the DOM mousedown event is fired on the circle.

property mouseMove

mouseMove: EventEmitter<MouseEvent>;

This event is fired when the DOM mousemove event is fired on the circle.

property mouseOut

mouseOut: EventEmitter<MouseEvent>;

This event is fired on circle mouseout.

property mouseOver

mouseOver: EventEmitter<MouseEvent>;

This event is fired on circle mouseover.

property mouseUp

mouseUp: EventEmitter<MouseEvent>;

This event is fired when the DOM mouseup event is fired on the circle.

property radius

radius: number;

The radius in meters on the Earth's surface.

property radiusChange

radiusChange: EventEmitter<number>;

This event is fired when the circle's radius is changed.

property rightClick

rightClick: EventEmitter<MouseEvent>;

This event is fired when the circle is right-clicked on.

property strokeColor

strokeColor: string;

The stroke color. All CSS3 colors are supported except for extended named colors.

property strokeOpacity

strokeOpacity: number;

The stroke opacity between 0.0 and 1.0

property strokePosition

strokePosition: 'CENTER' | 'INSIDE' | 'OUTSIDE';

The stroke position. Defaults to CENTER. This property is not supported on Internet Explorer 8 and earlier.

property strokeWeight

strokeWeight: number;

The stroke width in pixels.

property visible

visible: boolean;

Whether this circle is visible on the map. Defaults to true.

property zIndex

zIndex: number;

The zIndex compared to other polys.

method getBounds

getBounds: () => Promise<LatLngBounds>;

Gets the LatLngBounds of this Circle.

method getCenter

getCenter: () => Promise<LatLng>;

class SebmGoogleMapInfoWindow

@Component({
    selector: 'sebm-google-map-info-window',
    inputs: [
        'latitude',
        'longitude',
        'disableAutoPan',
        'isOpen',
        'zIndex',
        'maxWidth',
    ],
    outputs: ['infoWindowClose'],
    template: `<div class="sebm-google-map-info-window-content">
        <ng-content></ng-content>
    </div> `,
})
export class SebmGoogleMapInfoWindow implements OnDestroy, OnChanges, OnInit {}

SebmGoogleMapInfoWindow renders a info window inside a SebmGoogleMapMarker or standalone.

### Example

import { Component } from 'angular2/core';
import { SebmGoogleMap, SebmGoogleMapMarker, SebmGoogleMapInfoWindow } from
'angular2-google-maps/core';

@Component({
 selector: 'my-map-cmp',
 directives: [SebmGoogleMap, SebmGoogleMapMarker, SebmGoogleMapInfoWindow],
 styles: [`
   .sebm-google-map-container {
     height: 300px;
   }
`],
 template: `
   <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
     <sebm-google-map-marker [latitude]="lat" [longitude]="lng" [label]="'M'">
       <sebm-google-map-info-window [disableAutoPan]="true">
         Hi, this is the content of the <strong>info window</strong>
       </sebm-google-map-info-window>
     </sebm-google-map-marker>
   </sebm-google-map>
 `
})

constructor

constructor(_infoWindowManager: InfoWindowManager, _el: ElementRef);

property content

content: Node;

Holds the native element that is used for the info window content.

property disableAutoPan

disableAutoPan: boolean;

Disable auto-pan on open. By default, the info window will pan the map so that it is fully visible when it opens.

property hostMarker

hostMarker: SebmGoogleMapMarker;

Holds the marker that is the host of the info window (if available)

property infoWindowClose

infoWindowClose: EventEmitter<void>;

Emits an event when the info window is closed.

property isOpen

isOpen: boolean;

Sets the open state for the InfoWindow. You can also call the open() and close() methods.

property latitude

latitude: number;

The latitude position of the info window (only usefull if you use it ouside of a SebmGoogleMapMarker).

property longitude

longitude: number;

The longitude position of the info window (only usefull if you use it ouside of a SebmGoogleMapMarker).

property maxWidth

maxWidth: number;

Maximum width of the infowindow, regardless of content's width. This value is only considered if it is set before a call to open. To change the maximum width when changing content, call close, update maxWidth, and then open.

property zIndex

zIndex: number;

All InfoWindows are displayed on the map in order of their zIndex, with higher values displaying in front of InfoWindows with lower values. By default, InfoWindows are displayed according to their latitude, with InfoWindows of lower latitudes appearing in front of InfoWindows at higher latitudes. InfoWindows are always displayed in front of markers.

method close

close: () => Promise<void>;

Closes the info window.

method ngOnInit

ngOnInit: () => void;

method open

open: () => Promise<void>;

Opens the info window.

class SebmGoogleMapKmlLayer

@Directive({
    selector: 'sebm-google-map-kml-layer',
    inputs: [
        'clickable',
        'preserveViewport',
        'screenOverlays',
        'suppressInfoWindows',
        'url',
        'zIndex',
    ],
    outputs: ['layerClick', 'defaultViewportChange', 'statusChange'],
})
export class SebmGoogleMapKmlLayer implements OnInit, OnDestroy, OnChanges {}

constructor

constructor(_manager: KmlLayerManager);

property clickable

clickable: boolean;

If true, the layer receives mouse events. Default value is true.

property defaultViewportChange

defaultViewportChange: EventEmitter<void>;

This event is fired when the KML layers default viewport has changed.

property layerClick

layerClick: EventEmitter<KmlMouseEvent>;

This event is fired when a feature in the layer is clicked.

property preserveViewport

preserveViewport: boolean;

By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.

property screenOverlays

screenOverlays: boolean;

Whether to render the screen overlays. Default true.

property statusChange

statusChange: EventEmitter<void>;

This event is fired when the KML layer has finished loading. At this point it is safe to read the status property to determine if the layer loaded successfully.

property suppressInfoWindows

suppressInfoWindows: boolean;

Suppress the rendering of info windows when layer features are clicked.

property url

url: string;

The URL of the KML document to display.

property zIndex

zIndex: number;

The z-index of the layer.

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnInit

ngOnInit: () => void;

class SebmGoogleMapMarker

@Directive({
    selector: 'sebm-google-map-marker',
    inputs: [
        'latitude',
        'longitude',
        'title',
        'label',
        'draggable: markerDraggable',
        'iconUrl',
        'openInfoWindow',
        'opacity',
        'visible',
        'zIndex',
    ],
    outputs: ['markerClick', 'dragEnd', 'mouseOver', 'mouseOut'],
})
export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentInit {}

SebmGoogleMapMarker renders a map marker inside a SebmGoogleMap.

### Example

import { Component } from 'angular2/core';
import { SebmGoogleMap, SebmGoogleMapMarker } from 'angular2-google-maps/core';

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

constructor

constructor(_markerManager: MarkerManager);

property dragEnd

dragEnd: EventEmitter<MouseEvent>;

This event is fired when the user stops dragging the marker.

property draggable

draggable: boolean;

If true, the marker can be dragged. Default value is false.

property iconUrl

iconUrl: string;

Icon (the URL of the image) for the foreground.

property label

label: string;

The label (a single uppercase character) for the marker.

property latitude

latitude: number;

The latitude position of the marker.

property longitude

longitude: number;

The longitude position of the marker.

property markerClick

markerClick: EventEmitter<void>;

This event emitter gets emitted when the user clicks on the marker.

property mouseOut

mouseOut: EventEmitter<MouseEvent>;

This event is fired when the user mouses outside the marker.

property mouseOver

mouseOver: EventEmitter<MouseEvent>;

This event is fired when the user mouses over the marker.

property opacity

opacity: number;

The marker's opacity between 0.0 and 1.0.

property openInfoWindow

openInfoWindow: boolean;

Whether to automatically open the child info window when the marker is clicked.

property title

title: string;

The title of the marker.

property visible

visible: boolean;

If true, the marker is visible

property zIndex

zIndex: number;

All markers are displayed on the map in order of their zIndex, with higher values displaying in front of markers with lower values. By default, markers are displayed according to their vertical position on screen, with lower markers appearing in front of markers further up the screen.

method ngAfterContentInit

ngAfterContentInit: () => void;

class SebmGoogleMapPolygon

@Directive({
    selector: 'sebm-map-polygon',
    inputs: [
        'clickable',
        'draggable: polyDraggable',
        'editable',
        'fillColor',
        'fillOpacity',
        'geodesic',
        'paths',
        'strokeColor',
        'strokeOpacity',
        'strokeWeight',
        'visible',
        'zIndex',
    ],
    outputs: [
        'polyClick',
        'polyDblClick',
        'polyDrag',
        'polyDragEnd',
        'polyMouseDown',
        'polyMouseMove',
        'polyMouseOut',
        'polyMouseOver',
        'polyMouseUp',
        'polyRightClick',
    ],
})
export class SebmGoogleMapPolygon
    implements OnDestroy, OnChanges, AfterContentInit {}

SebmGoogleMapPolygon renders a polygon on a SebmGoogleMap

### Example

import { Component } from '@angular/core';
import { SebmGoogleMap, SebmGooglePolygon, LatLngLiteral } from 'angular2-maps/core';

@Component({
 selector: 'my-map-cmp',
 styles: [`
   .semb-map-container {
     height: 300px;
   }
`],
 template: `
   <semb-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
     <semb-map-polygon [paths]="paths">
     </semb-map-polygon>
   </semb-map>
 `
})
export class MyMapCmp {
  lat: number = 0;
  lng: number = 0;
  zoom: number = 10;
  paths: Array<LatLngLiteral> = [
    { lat: 0,  lng: 10 },
    { lat: 0,  lng: 20 },
    { lat: 10, lng: 20 },
    { lat: 10, lng: 10 },
    { lat: 0,  lng: 10 }
  ]
  // Nesting paths will create a hole where they overlap;
  nestedPaths: Array<Array<LatLngLiteral>> = [[
    { lat: 0,  lng: 10 },
    { lat: 0,  lng: 20 },
    { lat: 10, lng: 20 },
    { lat: 10, lng: 10 },
    { lat: 0,  lng: 10 }
  ], [
    { lat: 0, lng: 15 },
    { lat: 0, lng: 20 },
    { lat: 5, lng: 20 },
    { lat: 5, lng: 15 },
    { lat: 0, lng: 15 }
  ]]
}

constructor

constructor(_polygonManager: PolygonManager);

property clickable

clickable: boolean;

Indicates whether this Polygon handles mouse events. Defaults to true.

property draggable

draggable: boolean;

If set to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging. Defaults to false.

property editable

editable: boolean;

If set to true, the user can edit this shape by dragging the control points shown at the vertices and on each segment. Defaults to false.

property fillColor

fillColor: string;

The fill color. All CSS3 colors are supported except for extended named colors.

property fillOpacity

fillOpacity: number;

The fill opacity between 0.0 and 1.0

property geodesic

geodesic: boolean;

When true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When false, edges of the polygon are rendered as straight lines in screen space. Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions are maintained relative to the surface of the earth. Defaults to false.

property paths

paths: (LatLng | LatLngLiteral)[] | (LatLng | LatLngLiteral)[][];

The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths. As a result, the paths property may specify one or more arrays of LatLng coordinates. Paths are closed automatically; do not repeat the first vertex of the path as the last vertex. Simple polygons may be defined using a single array of LatLngs. More complex polygons may specify an array of arrays. Any simple arrays are converted into Arrays. Inserting or removing LatLngs from the Array will automatically update the polygon on the map.

property polyClick

polyClick: EventEmitter<PolyMouseEvent>;

This event is fired when the DOM click event is fired on the Polygon.

property polyDblClick

polyDblClick: EventEmitter<PolyMouseEvent>;

This event is fired when the DOM dblclick event is fired on the Polygon.

property polyDrag

polyDrag: EventEmitter<MouseEvent>;

This event is repeatedly fired while the user drags the polygon.

property polyDragEnd

polyDragEnd: EventEmitter<MouseEvent>;

This event is fired when the user stops dragging the polygon.

property polyDragStart

polyDragStart: EventEmitter<MouseEvent>;

This event is fired when the user starts dragging the polygon.

property polyMouseDown

polyMouseDown: EventEmitter<PolyMouseEvent>;

This event is fired when the DOM mousedown event is fired on the Polygon.

property polyMouseMove

polyMouseMove: EventEmitter<PolyMouseEvent>;

This event is fired when the DOM mousemove event is fired on the Polygon.

property polyMouseOut

polyMouseOut: EventEmitter<PolyMouseEvent>;

This event is fired on Polygon mouseout.

property polyMouseOver

polyMouseOver: EventEmitter<PolyMouseEvent>;

This event is fired on Polygon mouseover.

property polyMouseUp

polyMouseUp: EventEmitter<PolyMouseEvent>;

This event is fired whe the DOM mouseup event is fired on the Polygon

property polyRightClick

polyRightClick: EventEmitter<PolyMouseEvent>;

This even is fired when the Polygon is right-clicked on.

property strokeColor

strokeColor: string;

The stroke color. All CSS3 colors are supported except for extended named colors.

property strokeOpacity

strokeOpacity: number;

The stroke opacity between 0.0 and 1.0

property strokeWeight

strokeWeight: number;

The stroke width in pixels.

property visible

visible: boolean;

Whether this polygon is visible on the map. Defaults to true.

property zIndex

zIndex: number;

The zIndex compared to other polys.

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => any;

class SebmGoogleMapPolyline

@Directive({
    selector: 'sebm-google-map-polyline',
    inputs: [
        'clickable',
        'draggable: polylineDraggable',
        'editable',
        'geodesic',
        'strokeColor',
        'strokeWeight',
        'strokeOpacity',
        'visible',
        'zIndex',
    ],
    outputs: [
        'lineClick',
        'lineDblClick',
        'lineDrag',
        'lineDragEnd',
        'lineMouseDown',
        'lineMouseMove',
        'lineMouseOut',
        'lineMouseOver',
        'lineMouseUp',
        'lineRightClick',
    ],
})
export class SebmGoogleMapPolyline
    implements OnDestroy, OnChanges, AfterContentInit {}

SebmGoogleMapPolyline renders a polyline on a SebmGoogleMap

### Example

import { Component } from 'angular2/core';
import { SebmGoogleMap, SebmGooglePolyline, SebmGooglePolylinePoint } from
'angular2-google-maps/core';

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

constructor

constructor(_polylineManager: PolylineManager);

property clickable

clickable: boolean;

Indicates whether this Polyline handles mouse events. Defaults to true.

property draggable

draggable: boolean;

If set to true, the user can drag this shape over the map. The geodesic property defines the mode of dragging. Defaults to false.

property editable

editable: boolean;

If set to true, the user can edit this shape by dragging the control points shown at the vertices and on each segment. Defaults to false.

property geodesic

geodesic: boolean;

When true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When false, edges of the polygon are rendered as straight lines in screen space. Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions are maintained relative to the surface of the earth. Defaults to false.

property lineClick

lineClick: EventEmitter<PolyMouseEvent>;

This event is fired when the DOM click event is fired on the Polyline.

property lineDblClick

lineDblClick: EventEmitter<PolyMouseEvent>;

This event is fired when the DOM dblclick event is fired on the Polyline.

property lineDrag

lineDrag: EventEmitter<MouseEvent>;

This event is repeatedly fired while the user drags the polyline.

property lineDragEnd

lineDragEnd: EventEmitter<MouseEvent>;

This event is fired when the user stops dragging the polyline.

property lineDragStart

lineDragStart: EventEmitter<MouseEvent>;

This event is fired when the user starts dragging the polyline.

property lineMouseDown

lineMouseDown: EventEmitter<PolyMouseEvent>;

This event is fired when the DOM mousedown event is fired on the Polyline.

property lineMouseMove

lineMouseMove: EventEmitter<PolyMouseEvent>;

This event is fired when the DOM mousemove event is fired on the Polyline.

property lineMouseOut

lineMouseOut: EventEmitter<PolyMouseEvent>;

This event is fired on Polyline mouseout.

property lineMouseOver

lineMouseOver: EventEmitter<PolyMouseEvent>;

This event is fired on Polyline mouseover.

property lineMouseUp

lineMouseUp: EventEmitter<PolyMouseEvent>;

This event is fired whe the DOM mouseup event is fired on the Polyline

property lineRightClick

lineRightClick: EventEmitter<PolyMouseEvent>;

This even is fired when the Polyline is right-clicked on.

property strokeColor

strokeColor: string;

The stroke color. All CSS3 colors are supported except for extended named colors.

property strokeOpacity

strokeOpacity: number;

The stroke opacity between 0.0 and 1.0.

property strokeWeight

strokeWeight: number;

The stroke width in pixels.

property visible

visible: boolean;

Whether this polyline is visible on the map. Defaults to true.

property zIndex

zIndex: number;

The zIndex compared to other polys.

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => any;

class SebmGoogleMapPolylinePoint

@Directive({ selector: 'sebm-google-map-polyline-point' })
export class SebmGoogleMapPolylinePoint implements OnChanges {}

SebmGoogleMapPolylinePoint represents one element of a polyline within a SembGoogleMapPolyline

constructor

constructor();

property latitude

latitude: number;

The latitude position of the point.

property longitude

longitude: number;

The longitude position of the point;

property positionChanged

positionChanged: EventEmitter<LatLngLiteral>;

This event emitter gets emitted when the position of the point changed.

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => any;

Interfaces

interface KmlMouseEvent

interface KmlMouseEvent extends MouseEvent {}

property featureData

featureData: KmlFeatureData;

property pixelOffset

pixelOffset: Size;

interface LatLng

interface LatLng {}

method constructor

constructor: (lat: number, lng: number) => void;

method lat

lat: () => number;

method lng

lng: () => number;

interface LatLngBounds

interface LatLngBounds {}

method contains

contains: (latLng: LatLng) => boolean;

method equals

equals: (other: LatLngBounds | LatLngBoundsLiteral) => boolean;

method extend

extend: (point: LatLng) => void;

method getCenter

getCenter: () => LatLng;

method getNorthEast

getNorthEast: () => LatLng;

method getSouthWest

getSouthWest: () => LatLng;

method intersects

intersects: (other: LatLngBounds | LatLngBoundsLiteral) => boolean;

method isEmpty

isEmpty: () => boolean;

method toJSON

toJSON: () => LatLngBoundsLiteral;

method toSpan

toSpan: () => LatLng;

method toString

toString: () => string;

method toUrlValue

toUrlValue: (precision?: number) => string;

method union

union: (other: LatLngBounds | LatLngBoundsLiteral) => LatLngBounds;

interface LatLngBoundsLiteral

interface LatLngBoundsLiteral {}

property east

east: number;

property north

north: number;

property south

south: number;

property west

west: number;

interface LatLngLiteral

interface LatLngLiteral {}

property lat

lat: number;

property lng

lng: number;

interface LazyMapsAPILoaderConfigLiteral

interface LazyMapsAPILoaderConfigLiteral {}

Configuration for the LazyMapsAPILoader.

property apiKey

apiKey?: string;

The Google Maps API Key (see: https://developers.google.com/maps/documentation/javascript/get-api-key)

property apiVersion

apiVersion?: string;

Google Maps API version.

property channel

channel?: string;

The Google Maps channel name (for premium plans). A channel parameter is an optional parameter that allows you to track usage under your client ID by assigning a distinct channel to each of your applications.

property clientId

clientId?: string;

The Google Maps client ID (for premium plans). When you have a Google Maps APIs Premium Plan license, you must authenticate your application with either an API key or a client ID. The Google Maps API will fail to load if both a client ID and an API key are included.

property hostAndPath

hostAndPath?: string;

Host and Path used for the <script> tag.

property language

language?: string;

The Google Maps API uses the browser's preferred language when displaying textual information. If you wish to overwrite this behavior and force the API to use a given language, you can use this setting. See https://developers.google.com/maps/documentation/javascript/basics#Language

property libraries

libraries?: string[];

Defines which Google Maps libraries should get loaded.

property protocol

protocol?: GoogleMapsScriptProtocol;

Protocol used for the <script> tag.

property region

region?: string;

The default bias for the map behavior is US. If you wish to alter your application to serve different map tiles or bias the application, you can overwrite the default behavior (US) by defining a region. See https://developers.google.com/maps/documentation/javascript/basics#Region

interface MapTypeStyle

interface MapTypeStyle {}

property elementType

elementType?:
    | 'all'
    | 'geometry'
    | 'geometry.fill'
    | 'geometry.stroke'
    | 'labels'
    | 'labels.icon'
    | 'labels.text'
    | 'labels.text.fill'
    | 'labels.text.stroke';

property featureType

featureType?:
    | 'administrative'
    | 'administrative.country'
    | 'administrative.land_parcel'
    | 'administrative.locality'
    | 'administrative.neighborhood'
    | 'administrative.province'
    | 'all'
    | 'landscape'
    | 'landscape.man_made'
    | 'landscape.natural'
    | 'landscape.natural.landcover'
    | 'landscape.natural.terrain'
    | 'poi'
    | 'poi.attraction'
    | 'poi.business'
    | 'poi.government'
    | 'poi.medical'
    | 'poi.park'
    | 'poi.place_of_worship'
    | 'poi.school'
    | 'poi.sports_complex'
    | 'road'
    | 'road.arterial'
    | 'road.highway'
    | 'road.highway.controlled_access'
    | 'road.local'
    | 'transit'
    | 'transit.line'
    | 'transit.station'
    | 'transit.station.airport'
    | 'transit.station.bus'
    | 'transit.station.rail'
    | 'water';

property stylers

stylers: MapTypeStyler[];

interface MouseEvent

interface MouseEvent {}

MouseEvent gets emitted when the user triggers mouse events on the map.

property coords

coords: LatLngLiteral;

interface PolyMouseEvent

interface PolyMouseEvent extends MouseEvent {}

PolyMouseEvent gets emitted when the user triggers mouse events on a polyline.

property edge

edge: number;

property path

path: number;

property vertex

vertex: number;

Enums

enum GoogleMapsScriptProtocol

enum GoogleMapsScriptProtocol {
    HTTP = 1,
    HTTPS = 2,
    AUTO = 3,
}

member AUTO

AUTO = 3

member HTTP

HTTP = 1

member HTTPS

HTTPS = 2

Package Files (22)

Dependencies (0)

No dependencies.

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/angular2-google-maps.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/angular2-google-maps)

HTML

<a href="https://www.jsdocs.io/package/angular2-google-maps"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 year ago.
Package analyzed in 6026 ms.
Missing or incorrect documentation? Open an issue for this package.