# Module Exc-Map-V2 ##### Content - ExcMapV2Module ###### Components - [exg-map](#ExgMapComponent) ######
Components and directives for use in content of exg-map - [exg-map-bicycling-layer](#ExgMapBicyclingLayerDirective) - [exg-map-circle](#ExgMapCircleComponent) - [exg-map-data-layer](#ExgMapDataLayerComponent) - [exg-map-drawing-manager](#ExgMapDrawingManagerDirective) - [exg-map-info-window](#ExgMapInfoWindowComponent) - [exg-map-kml-layer](#ExgMapKmlLayerComponent) - [exg-map-marker](#ExgMapMarkerDirective) - [exg-map-marker-cluster](#ExgMapMarkerClusterDirective) - [exg-map-polygon](#ExgMapPolygonComponent) - [exg-map-polyline](#ExgMapPolylineComponent) - [exg-map-icon-sequence](#ExgMapPolylineIconDirective) - [exg-map-polyline-point](#ExgMapPolylinePointDirective) - [exg-map-rectangle](#ExgMapRectangleComponent) - [exg-map-transit-layer](#ExgMapTransitLayerDirective) - [exg-map-heatmap-layer](#ExgMapHeatmapLayerDirective) ## Dependencies - @types/google.maps: "^3.58.1", - @googlemaps/markerclustererplus: "^1.2.10" ## Install To install ExcMapV2Module into your project use ```npm i exc-map-v2``` ## Prepare 1. `app.module` Add the following information to import-section of file. ```typescript ExcMapV2Module.forRoot({ apiKey: '--Your API Key--', libraries: ['drawing', 'visualization', 'places'] }) ``` 2. `angular.json` Add the following information to `projects/YOURPROJECTNAME/architect/build/assets` array. ```json { "input" : "./node_modules/@googlemaps/markerclustererplus/images", "glob" : "*", "output": "/images" } ``` 3. `tsconfig.app.json` Add the following information to `compilerOptions/types` array ```json "types": ["google.maps"] ``` --- [Index](#index) ##
exg-map ### classes | classname | description | |------------|--------------------------------------------------------------------------------------------------------------| | hidelogo | hides google logo on map.
(Please be sure there is at least one logo visible on page) | | hideprints | hides usage terms on map.
(Please be sure there is at least on usage terms section is visible on page) | ### Example Add a map and center it after loading to given latitude and longitude ```html ``` ### Definitions #### Inputs | name | type | default | description | |------------------------|----------------------------------------------------------------------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------| | longitude | number | 0 | Longitude for centering map | | latitude | number | 0 | Latitude for centering map | | zoom | number | 8 | Zoom-level for map | | minZoom | number | undefined | Minimum allowed zoom level | | maxZoom | number | undefined | Maximum allowed zoom level | | controlSize | number | undefined | Control size in pixel | | mapDraggable | boolean | true | flag if map is draggable | | disableDoubleClickZoom | boolean | false | flag if zoom on double-click is disabled | | disableDefaultUI | boolean | false | flag if default UI is disabled | | scrollwheel | boolean | true | flag if zoom by scrollwheel is enabled | | backgroundColor | string | undefined | backgroundColor of map | | draggableCursor | string | undefined | name or url of cursor to display when mousing over draggable map. Uses style attribute
`[draggableCursor]="'url(http://www.example.com/icon.png), auto;'" ` | | draggingCursor | string | undefined | name or url of cursor to display when the map is beeing dragged. Uses style attribute
`[draggingCursor]="'url(http://www.example.com/icon.png), auto;'" ` | | keyboardShortcuts; | boolean | true | flag if keyboard shortcuts are enabled | | | styles | google.maps.MapTypeStyle[] | [] | Styles to apply to each of the default map types. Note that for Satellite/Hybrid and Terrainmodes, these styles will only apply to labels and geometry. | | usePanning | boolean | false | When true and the latitude and/or longitude values changes, the Google Maps panTo method is used to center the map. | | fitBounds | boolean
google.maps.LatLngBoundsLiteral
google.maps.LatLngBounds | false | Sets the viewport to contain the given bounds. If true, the bounds get automatically computed from all elements using service for fit bounds. | | fitBoundsPadding | number
google.maps.Padding | undefined | Padding amount for the bounds. | | mapTypeId | keyof typeof google.maps.MapTypeId | 'ROADMAP' | Type of map. Possible values: 'ROADMAP','SATELLITE','HYBRID','TERRAIN' | | clickableIcons | boolean | true | flag if icons on map are clickable | | showDefaultInfoWindow | boolean | true | When map icons are clickable by default, an info window is displayed. | | gestureHandling | google.maps.GestureHandlingOptions | 'auto' | This setting controls how gestures on the map are handled. Possible values: 'cooperative','greedy','none','auto' | | tilt | number | 0 | Possible values: 0, 45 | | restriction | google.maps.MapRestriction | undefined | Options for restricting the bounds of the map.User cannot pan or zoom away from restricted area. | #### Outputs | name | $event type | description | |-----------------|----------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------| | mapClick | google.maps.MapMouseEvent
google.maps.IconMouseEvent | This event emitter gets emitted when the user clicks on the map (but not when they click on amarker or infoWindow). | | mapRightClick | google.maps.MapMouseEvent | This event emitter gets emitted when the user right-clicks on the map (but not when they clickon a marker or infoWindow). | | mapDblClick | google.maps.MapMouseEvent | This event emitter gets emitted when the user double-clicks on the map (but not when they clickon a marker or infoWindow). | | centerChange | google.maps.LatLngLiteral | This event emitter is fired when the map center changes. | | boundsChange | google.maps.LatLngBounds | This event is fired when the viewport bounds have changed. | | mapTypeIdChange | google.maps.MapTypeId | This event is fired when the mapTypeId property changes. | | idle | void | This event is fired when the map becomes idle after panning or zooming. | | zoomChange | number | This event is fired when the zoom level has changed. | | mapReady | any | This event is fired when the google map is fully initialized. map instance as result | | tilesLoaded | void | This event is fired when the visible tiles have finished loading. | #### Controls - `exg-map-fullscreen-control` - `exg-map-type-control` - `exg-map-pan-control` - `exg-map-rotate-control` - `exg-map-scale-control` - `exg-map-street-view-control` - `exg-map-zoom-control` ##### Example Show fullscreen control and map-type control on map. Only if `disableDefaultUI` is set to true ```html ``` --- [Index](#index) ##
exg-map-bicycling-layer ### Example Adds a bicycling layer to the map ```html ``` --- [Index](#index) ##
exg-map-circle ### example Adds a circle to the map ```html ``` ### Definitions #### Inputs | name | type | default | description | |-----------------|-----------------------------------------|-----------|--------------------------------------------------------------------------------------------| | latitude | number | undefined | (required) Latitude position of circle | | longitude | number | undefined | (required) Longitude position of circle | | radius | number | undefined | (required) Radius in meters on earth surface of the circle | | clickable | boolean | true | flag if circle is clickable and handles mouse events | | circleDraggable | boolean | false | flag if circle is draggable. | | editable | boolean | false | flag if circle is editable. | | fillColor | string | undefined | fill color of the circle (All CSS3 colors are supported except for extended named colors.) | | fillOpacity | number | undefined | fill opacity between 0.0 and 1.0 | | strokeColor | string | undefined | fill color of the circle (All CSS3 colors are supported except for extended named colors.) | | strokeOpacity | number | undefined | stroke opacity between 0.0 and 1.0 | | strokePosition | keyof typeof google.maps.StrokePosition | 'CENTER' | Position of stroke. Possible values: 'CENTER','INSIDE','OUTSIDE' | | strokeWeight | number | 0 | The stroke width in pixels. | | visible | boolean | true | Visibility indicator | | zIndex | number | undefined | zIndex compared to other polys | #### Outputs | name | $event type | description | |----------------|---------------------------|--------------------------------------------------------------------------| | centerChange | google.maps.LatLngLiteral | This event is fired when the circle's center is changed. | | circleClick | google.maps.MapMouseEvent | This event emitter gets emitted when the user clicks on the circle. | | circleDblClick | google.maps.MapMouseEvent | This event emitter gets emitted when the user clicks on the circle. | | drag | google.maps.MapMouseEvent | This event is repeatedly fired while the user drags the circle. | | dragEnd | google.maps.MapMouseEvent | This event is fired when the user stops dragging the circle. | | dragStart | google.maps.MapMouseEvent | This event is fired when the user starts dragging the circle. | | mouseDown | google.maps.MapMouseEvent | This event is fired when the DOM mousedown event is fired on the circle. | | mouseMove | google.maps.MapMouseEvent | This event is fired when the DOM mousemove event is fired on the circle. | | mouseOut | google.maps.MapMouseEvent | This event is fired on circle mouseout. | | mouseOver | google.maps.MapMouseEvent | This event is fired on circle mouseover. | | mouseUp | google.maps.MapMouseEvent | This event is fired when the DOM mouseup event is fired on the circle. | | radiusChange | number | This event is fired when the circle's radius is changed. | | rightClick | google.maps.MapMouseEvent | This event is fired when the circle is right-clicked on. | --- [Index](#index) ##
exg-map-data-layer ### example Adds a data-layer to the map ```html ``` ```typescript geoJsonObject: any = { type: 'FeatureCollection', features: [ { type: 'Feature', properties: { letter: 'G', color: 'blue', rank: '7', ascii: '71' }, geometry: { type: 'Polygon', coordinates: [ [ [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40], [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49], [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70], [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62], [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18], [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50], [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48], [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14] ] ] } }, { type: 'Feature', properties: { letter: 'o', color: 'red', rank: '15', ascii: '111' }, geometry: { type: 'Polygon', coordinates: [ [ [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60], [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42], [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95], [129.68, -27.21], [129.33, -26.23], [128.84, -25.76] ], [ [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80], [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44] ] ] } }, { type: 'Feature', properties: { letter: 'o', color: 'yellow', rank: '15', ascii: '111' }, geometry: { type: 'Polygon', coordinates: [ [ [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53], [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34], [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83], [132.71, -25.64], [131.87, -25.76] ], [ [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26], [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17] ] ] } }, { type: 'Feature', properties: { letter: 'g', color: 'blue', rank: '7', ascii: '103' }, geometry: { type: 'Polygon', coordinates: [ [ [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90], [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49], [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36], [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76], [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24], [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47], [138.99, -25.40], [138.73, -25.00], [138.12, -25.04] ], [ [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72], [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54] ] ] } }, { type: 'Feature', properties: { letter: 'l', color: 'green', rank: '12', ascii: '108' }, geometry: { type: 'Polygon', coordinates: [ [ [140.14, -21.04], [140.31, -29.42], [141.67, -29.49], [141.59, -20.92], [140.14, -21.04] ] ] } }, { type: 'Feature', properties: { letter: 'e', color: 'red', rank: '5', ascii: '101' }, geometry: { type: 'Polygon', coordinates: [ [ [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04], [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40], [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57], [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42], [144.31, -28.26], [144.14, -27.41] ], [ [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91], [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39] ] ] } } ] }; styleFunc(feature : any ): any { return ({ clickable: false, fillColor: feature.getProperty('color'), strokeWeight: 1 }); } ``` ### Definitions #### Inputs | name | type | default | description | |---------|--------------------------------------------------------------------|-----------|----------------------------------------| | geoJson | object
string | null | (required) The geoJson to be displayed | | style | (param: google.maps.Data.Feature) => google.maps.Data.StyleOptions | undefined | The layer's style function. | #### Outputs | name | $event type | description | |------------|-----------------------------|-------------------------------------------------------------| | layerClick | google.maps.Data.MouseEvent | This event is fired when a feature in the layer is clicked. | --- [Index](#index) ##
exg-map-drawing-manager ### example Adds the drawing functionality to the map. Requires 'drawing' library of google maps api ```html ``` ### Definitions #### Inputs | name | type | default | description | |-----------------------|-------------------------------------------|-----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | drawingControl | boolean | true | The enabled/disabled state of the drawing control | | drawingMode | google.maps.drawing.OverlayType | null | The DrawingManager's drawing mode, which defines the type of overlay to beadded on the map. A drawing mode of null means that the user can interactwith the map as normal, and clicks do not draw anything.
Possible values: 'CIRCLE','MARKER','POLYGON','POLYLINE','RECTANGLE' | | drawingControlOptions | google.maps.drawing.DrawingControlOptions | undefined | The display options for the drawing control | | circleOptions | google.maps.CircleOptions | undefined | Options to apply to any new circles created with this DrawingManager.The `center` and `radius` properties are ignored, and the `map` property of anew circle is always set to the DrawingManager's map. | | markerOptions | google.maps.MarkerOptions | undefined | Options to apply to any new markers created with this DrawingManager.The `position` property is ignored, and the `map` property of a new markeris always set to the DrawingManager's map. | | polygonOptions | google.maps.PolygonOptions | undefined | Options to apply to any new polygons created with this DrawingManager.The `paths` property is ignored, and the map property of a new polygon isalways set to the DrawingManager's map. | | polylineOptions | google.maps.PolylineOptions | undefined | Options to apply to any new polylines created with this DrawingManager.The `path` property is ignored, and the map property of a new polyline isalways set to the DrawingManager's map. | | rectangleOptions | google.maps.RectangleOptions | undefined | Options to apply to any new rectangles created with this DrawingManager.The `bounds` property is ignored, and the map property of a new rectangleis always set to the DrawingManager's map.| #### Outputs | name | $event type | description | |-------------------|------------------------------------------|-------------------------------------------------------------------------------| | circleComplete | google.maps.Circle | This event is fired when the user has finished drawing a circle. | | markerComplete | google.maps.Marker | This event is fired when the user has finished drawing a marker. | | overlayComplete | google.maps.drawing.OverlayCompleteEvent | This event is fired when the user has finished drawing an overlay of anytype. | | polygonComplete | google.maps.Polygon | This event is fired when the user has finished drawing a polygon. | | polylineComplete | google.maps.Polyline | This event is fired when the user has finished drawing a polyline. | | rectangleComplete | google.maps.Rectangle | This event is fired when the user has finished drawing a rectangle. | --- [Index](#index) ##
exg-map-info-window ### example Adds an info-window to the map. ```html

Headline

Text
 ``` Adds an info-window to the map for a marker. ```html

Headline

Text
 ``` ### Definitions #### Inputs | name | type | default | description | |----------------|---------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | latitude | number | undefined | The latitude position of the info window (only usefull if you use it ouside of a ExgMapMarkerDirective). | | longitude | number | undefined | The longitude position of the info window (only usefull if you use it ouside of a ExgMapMarkerDirective). | | disableAutoPan | boolean | undefined | Disable auto-pan on open. By default, the info window will pan the map so that it is fullyvisible when it opens. | | zIndex | number | undefined | All InfoWindows are displayed on the map in order of their zIndex, with higher valuesdisplaying in front of InfoWindows with lower values. By default, InfoWindows are displayedaccording to their latitude, with InfoWindows of lower latitudes appearing in front ofInfoWindows at higher latitudes. InfoWindows are always displayed in front of markers. | | maxWidth | number | undefined | Maximum width of the infowindow, regardless of content's width. This value is only consideredif it is set before a call to open. To change the maximum width when changing content, callclose, update maxWidth, and then open. | | isOpen | boolean | false | Sets the open state for the InfoWindow. You can also call the open() and close() methods. | | exclusive | boolean | false | Sets exclusive mode for info-window. If true, alle other info-windows on map will be closed on open exclusive info-window | | togglemode | boolean | false | Activats togglemode. Second click on i.e. a marker closes info-window. | --- [Index](#index) ##
exg-map-kml-layer ### example Adds a KML Layer to the map. ```html ``` ### Definitions #### Inputs | name | type | default | description | |---------------------|----------------------------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | clickable | boolean | true | If true, the layer receives mouse events. Default value is true. | | preserveViewport | boolean | false | By default, the input map is centered and zoomed to the bounding box of the contents of thelayer.If this option is set to true, the viewport is left unchanged, unless the map's center and zoomwere never set. | | screenOverlays | boolean | true | Whether to render the screen overlays. Default true. | | suppressInfoWindows | google.maps.CircleOptions | false | Suppress the rendering of info windows when layer features are clicked. | | url | google.maps.MarkerOptions | string | The URL of the KML document to display. | | zIndex | google.maps.PolygonOptions | number | The z-index of the layer. | #### Outputs | name | $event type | description | |-----------------------|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------| | layerClick | google.maps.KmlMouseEvent | This event is fired when a feature in the layer is clicked. | | defaultViewportChange | void | This event is fired when the KML layers default viewport has changed. | | statusChange | 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 loadedsuccessfully. | --- [Index](#index) ##
exg-map-marker ### example Adds a marker to the map. ```html ``` ### Definitions #### Inputs | name | type | default | description | |-----------------|----------------------------------------------------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | latitude | number | undefined | The latitude position of the marker. | | longitude | number | undefined | The longitude position of the marker. | | title | string | undefined | The title of the marker. | | label | string
google.maps.MarkerLabel | undefined | The label (a single uppercase character) for the marker. | | markerDraggable | boolean | false | If true, the marker can be dragged. Default value is false. | | iconUrl | string
google.maps.Icon
google.maps.Symbol | undefined | Icon (the URL of the image) for the foreground. | | visible | boolean | true | If true, the marker is visible | | openInfoWindow | boolean | true | Whether to automatically open the child info window when the marker is clicked. | | opacity | number | 1 | The marker's opacity between 0.0 and 1.0. | | zIndex | number | 1 | All markers are displayed on the map in order of their zIndex, with higher values displaying infront of markers with lower values. By default, markers are displayed according to theirvertical position on screen, with lower markers appearing in front of markers further up thescreen. | | markerClickable | boolean | true | If true, the marker can be clicked. Default value is true. | | animation | keyof typeof google.maps.Animation | undefined | Which animation to play when marker is added to a map.This can be 'BOUNCE' or 'DROP' undefined stops animation | | | | | | | | | | | #### Outputs | name | $event type | description | |------------------|------------------------------------|---------------------------------------------------------------------------| | animationChange | keyof typeof google.maps.Animation | This event is fired when the marker's animation property changes. | | markerClick | ExgMapMarkerDirective | This event emitter gets emitted when the user clicks on the marker. | | markerDblClick | ExgMapMarkerDirective | This event emitter gets emitted when the user clicks twice on the marker. | | markerRightClick | void
null | This event is fired when the user rightclicks on the marker. | | dragStart | google.maps.MapMouseEvent | This event is fired when the user starts dragging the marker. | | drag | google.maps.MapMouseEvent | This event is repeatedly fired while the user drags the marker. | | dragEnd | google.maps.MapMouseEvent | This event is fired when the user stops dragging the marker. | | mouseOver | google.maps.MapMouseEvent | This event is fired when the user mouses over the marker. | | mouseOut | google.maps.MapMouseEvent | This event is fired when the user mouses outside the marker. | --- [Index](#index) ##
exg-map-marker-cluster ### example Adds a marker-cluster to the map. Clusters near markers ```html ``` ### Definitions #### Inputs | name | type | default | description | |--------------------|--------------------|----------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | gridSize | number | undefined | The grid size of a cluster in pixels | | maxZoom | number | undefined | The maximum zoom level that a marker can be part of a cluster. | | zoomOnClick | boolean | undefined | Whether the default behaviour of clicking on a cluster is to zoom into it. | | averageCenter | boolean | undefined | Whether the center of each cluster should be the average of all markers in the cluster. | | minimumClusterSize | number | undefined | The minimum number of markers to be in a cluster before the markers are hidden and a count is shown. | | styles | ClusterIconStyle[] | undefined | An object that has style properties. | | calculator | Calculator | undefined | A function that calculates the cluster style and text based on the markers in the cluster. | | imagePath | string | undefined | path to image files for cluster | | imageExtension | string | undefined | extension for image files of cluster | | clusterClass | string | 'cluster' | The name of the CSS class defining general styles for the cluster markers.Use this class to define CSS styles that are not set up by the code thatprocesses the `styles` array. | | enableRetinaIcons | boolean | false | Whether to allow the use of cluster icons that have sizes that are somemultiple (typically double) of their actual display size. Icons such asthese look better when viewed on high-resolution monitors such as Apple'sRetina displays. Note: if this property is `true`, sprites cannot be usedas cluster icons. | | ignoreHidden | boolean | undefined | Whether to ignore hidden markers in clusters. You may want to set this to`true` to ensure that hidden markers are not included in the marker countthat appears on a cluster marker (this count is the value of the `text`property of the result returned by the default `calculator`). If set to`true` and you change the visibility of a marker being clustered, be sureto also call `MarkerClusterer.repaint()`. | | imageSizes | number[] | [53, 56, 66, 78, 90] | An array of numbers containing the widths of the group of`.` image files. (The images are assumed tobe square.) | | title | string | undefined | The tooltip to display when the mouse moves over a cluster marker.(Alternatively, you can use a custom `calculator` function to specify adifferent tooltip for each cluster marker.) | #### Outputs | name | $event type | description | |--------------|-------------|-----------------------------| | clusterClick | void | Fires if cluster is clicked | --- [Index](#index) ##
exg-map-polygon ### example Adds a polygon to the map. ```html ``` ```typescript paths: LatLngLiteral[] = [ {lat: 50.01098200, lng: 9.01809747}, {lat: 50.31098200, lng: 9.71809747}, {lat: 50.84756905, lng: 9.91809747}, {lat: 50.91098200, lng: 9.3809747}, {lat: 50.21098200, lng: 9.21809747} ]; ``` ### Definitions #### Inputs | name | type | default | description | |---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | clickable | boolean | true | Indicates whether this Polygon handles mouse events. Defaults to true. | | polyDraggable | boolean | false | If set to true, the user can drag this shape over the map. The geodesicproperty defines the mode of dragging. Defaults to false. | | editable | boolean | false | If set to true, the user can edit this shape by dragging the controlpoints shown at the vertices and on each segment. Defaults to false. | | fillColor | string | undefined | The fill color. All CSS3 colors are supported except for extendednamed colors. | | fillOpacity | number | undefined | The fill opacity between 0.0 and 1.0 | | geodesic | boolean | false | When true, edges of the polygon are interpreted as geodesic and willfollow the curvature of the Earth. When false, edges of the polygon arerendered as straight lines in screen space. Note that the shape of ageodesic polygon may appear to change when dragged, as the dimensionsare maintained relative to the surface of the earth. Defaults to false. | | paths | google.maps.LatLng[]
google.maps.LatLng[][]
google.maps.MVCArray
google.maps.MVCArray>
google.maps.LatLngLiteral[]
google.maps.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 ofLatLng coordinates. Paths are closed automatically; do not repeat thefirst vertex of the path as the last vertex. Simple polygons may bedefined using a single array of LatLngs. More complex polygons mayspecify an array of arrays. Any simple arrays are converted into Arrays.Inserting or removing LatLngs from the Array will automatically updatethe polygon on the map. | | strokeColor | string | undefined | The stroke color. All CSS3 colors are supported except for extendednamed colors. | | strokeOpacity | number | undefined | The stroke opacity between 0.0 and 1.0 | | strokeWeight | number | undefined | The stroke width in pixels. | | visible | boolean | undefined | Whether this polygon is visible on the map. Defaults to true. | | zIndex | number | undefined | The zIndex compared to other polys. | #### Outputs | name | $event type | description | |-----------------|-------------------------------------------------------------------|---------------------------------------------------------------------------| | polyClick | google.maps.PolyMouseEvent | This event is fired when the DOM click event is fired on the Polygon. | | polyDblClick | google.maps.PolyMouseEvent | This event is fired when the DOM dblclick event is fired on the Polygon. | | polyDrag | google.maps.MapMouseEvent | This event is repeatedly fired while the user drags the polygon. | | polyDragEnd | google.maps.MapMouseEvent | This event is fired when the user stops dragging the polygon. | | polyDragStart | google.maps.MapMouseEvent | This event is fired when the user starts dragging the polygon. | | polyMouseDown | google.maps.PolyMouseEvent | This event is fired when the DOM mousedown event is fired on the Polygon. | | polyMouseMove | google.maps.PolyMouseEvent | This event is fired when the DOM mousemove event is fired on the Polygon. | | polyMouseOut | google.maps.PolyMouseEvent | This event is fired on Polygon mouseout. | | polyMouseOver | google.maps.PolyMouseEvent | This event is fired on Polygon mouseover. | | polyMouseUp | google.maps.PolyMouseEvent | This event is fired whe the DOM mouseup event is fired on the Polygon | | polyRightClick | google.maps.PolyMouseEvent | This event is fired when the Polygon is right-clicked on. | | polyPathsChange | MVCEvent google.maps.LatLngLiteral[]> | This event is fired after Polygon first path changes. | --- [Index](#index) ##
exg-map-polyline ### example Adds a polyline to the map. ```html ``` ### Definitions #### Inputs | name | type | default | description | |-------------------|---------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | clickable | boolean | true | Indicates whether this Polyline handles mouse events. Defaults to true. | | polylineDraggable | boolean | false | If set to true, the user can drag this shape over the map. The geodesic property defines themode of dragging. Defaults to false. | | editable | boolean | false | If set to true, the user can edit this shape by dragging the control points shown at thevertices and on each segment. Defaults to false. | | geodesic | boolean | false | When true, edges of the polygon are interpreted as geodesic and will follow the curvature ofthe 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 dimensionsare maintained relative to the surface of the earth. Defaults to false. | | strokeColor | string | undefined | The stroke color. All CSS3 colors are supported except for extended named colors. | | strokeOpacity | number | undefined | The stroke opacity between 0.0 and 1.0. | | strokeWeight | number | undefined | The stroke width in pixels. | | visible | boolean | undefined | Whether this polyline is visible on the map. Defaults to true. | | zIndex | number | undefined | The zIndex compared to other polys. | #### Outputs | name | $event type | description | |----------------|------------------------------|----------------------------------------------------------------------------| | lineClick | google.maps.PolyMouseEvent | This event is fired when the DOM click event is fired on the Polyline. | | lineDblClick | google.maps.PolyMouseEvent | This event is fired when the DOM dblclick event is fired on the Polyline. | | lineDrag | google.maps.MapMouseEvent | This event is repeatedly fired while the user drags the polyline. | | lineDragEnd | google.maps.MapMouseEvent | This event is fired when the user stops dragging the polyline. | | lineDragStart | google.maps.MapMouseEvent | This event is fired when the user starts dragging the polyline. | | lineMouseDown | google.maps.PolyMouseEvent | This event is fired when the DOM mousedown event is fired on the Polyline. | | lineMouseMove | google.maps.PolyMouseEvent | This event is fired when the DOM mousemove event is fired on the Polyline. | | lineMouseOut | google.maps.PolyMouseEvent | This event is fired on Polyline mouseout. | | lineMouseOver | google.maps.PolyMouseEvent | This event is fired on Polyline mouseover. | | lineMouseUp | google.maps.PolyMouseEvent | This event is fired whe the DOM mouseup event is fired on the Polyline | | lineRightClick | google.maps.PolyMouseEvent | This event is fired when the Polyline is right-clicked on. | | polyPathChange | MVCEvent | This event is fired after Polyline's path changes. | --- [Index](#index) ##
exg-map-icon-sequence ### example Adds a polyline icon to polyline to the map. ```html ``` ### Definitions #### Inputs | name | type | default | description | |---------------|---------------------------------------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | fixedRotation | boolean | undefined | If `true`, each icon in the sequence has the same fixed rotation regardless of theangle of the edge on which it lies. Defaults to `false`, in which case each iconin the sequence is rotated to align with its edge. | | offset | string | undefined | The distance from the start of the line at which an icon is to be rendered. Thisdistance may be expressed as a percentage of line's length (e.g. '50%') or in pixels(e.g. '50px'). Defaults to '100%'. | | repeat | string | undefined | The distance between consecutive icons on the line. This distance may be expressed asa percentage of the line's length (e.g. '50%') or in pixels (e.g. '50px'). To disablerepeating of the icon, specify '0'. Defaults to '0'. | | anchorX | number | undefined | The x coordinate of the position of the symbol relative to the polyline. The coordinateof the symbol's path is translated _left_ by the anchor's x coordinate. By default, asymbol is anchored at (0, 0). The position is expressed in the same coordinate system as thesymbol's path. The x coordinate of the position of the symbol relative to the polyline. The coordinateof the symbol's path is translated _left_ by the anchor's x coordinate. By default, asymbol is anchored at (0, 0). The position is expressed in the same coordinate system as thesymbol's path. | | anchorY | number | undefined | The y coordinate of the position of the symbol relative to the polyline. The coordinateof the symbol's path is translated _up_ by the anchor's y coordinate. By default, asymbol is anchored at (0, 0). The position is expressed in the same coordinate system as thesymbol's path. | | fillColor | string | undefined | The symbol's fill color. All CSS3 colors are supported except for extended namedcolors. Defaults to the stroke color of the corresponding polyline. | | fillOpacity | number | undefined | The symbol's fill opacity. Defaults to 0. | | path | keyof typeof google.maps.SymbolPath
string | undefined | (required) The symbol's path, which is a built-in symbol path, or a custom path expressed usingSVG path notatio. | | rotation | number | undefined | The angle by which to rotate the symbol, expressed clockwise in degrees.Defaults to 0. A symbol where `fixedRotation` is `false` is rotated relative tothe angle of the edge on which it lies. | | scale | number | undefined | The amount by which the symbol is scaled in size. Defaults to the stroke weightof the polyline; after scaling, the symbol must lie inside a square 22 pixels insize centered at the symbol's anchor. | | strokeColor | string | undefined | The symbol's stroke color. All CSS3 colors are supported except for extended namedcolors. Defaults to the stroke color of the polyline. | | strokeOpacity | number | undefined | The symbol's stroke opacity. Defaults to the stroke opacity of the polyline. | | strokeWeight | number | undefined | The symbol's stroke weight. Defaults to the scale of the symbol. | --- [Index](#index) ##
exg-map-polyline-point ### example Adds a polyline point to polyline to the map. ```html ``` ### Definitions #### Inputs | name | type | default | description | |-----------|--------|-----------|--------------------------------------| | latitude | number | undefined | The latitude position of the point. | | longitude | number | undefined | The longitude position of the point; | #### Outputs | name | $event type | description | |-----------------|---------------------------|-------------------------------------------------------------------------| | positionChanged | google.maps.LatLngLiteral | This event emitter gets emitted when the position of the point changed. | -------------------------------------------- [Index](#index) ##
exg-map-rectangle ### example Adds a rectangle to the map. ```html ``` ### Definitions #### Inputs | name | type | default | description | |--------------------|-----------------------------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------| | north | number | undefined | The north (latitude) position of the rectangle (required). | | east | number | undefined | The east (longitude) position of the rectangle (required). | | south | number | undefined | The south (latitude) position of the rectangle (required). | | west | number | undefined | The west (longitude) position of the rectangle (required). | | clickable | boolean | true | Indicates whether this Rectangle handles mouse events. Defaults to true. | | rectangleDraggable | boolean | false | If set to true, the user can drag this rectangle over the map. Defaults to false. | | editable | boolean | false | If set to true, the user can edit this rectangle by dragging the control points shown atthe center and around the circumference of the rectangle. Defaults to false. | | fillColor | string | undefined | The fill color. All CSS3 colors are supported except for extended named colors. | | fillOpacity | number | undefined | The fill opacity between 0.0 and 1.0. | | strokeColor | string | undefined | The stroke color. All CSS3 colors are supported except for extended named colors. | | strokeOpacity | number | undefined | The stroke opacity between 0.0 and 1.0 | | strokePosition | keyof typeof google.maps.StrokePosition | 'CENTER' | The stroke position. Defaults to CENTER.This property is not supported on Internet Explorer 8 and earlier. | | strokeWeight | number | 0 | The stroke width in pixels. | | visible | boolean | true | Whether this rectangle is visible on the map. Defaults to true. | | zIndex | number | undefined | The zIndex compared to other polys. | #### Outputs | name | $event type | description | |-------------------|---------------------------------|-----------------------------------------------------------------------------| | boundsChange | google.maps.LatLngBoundsLiteral | This event is fired when the rectangle's is changed. | | rectangleClick | google.maps.MapMouseEvent | This event emitter gets emitted when the user clicks on the rectangle. | | rectangleDblClick | google.maps.MapMouseEvent | This event emitter gets emitted when the user clicks on the rectangle. | | drag | google.maps.MapMouseEvent | This event is repeatedly fired while the user drags the rectangle. | | dragEnd | google.maps.MapMouseEvent | This event is fired when the user stops dragging the rectangle. | | dragStart | google.maps.MapMouseEvent | This event is fired when the user starts dragging the rectangle. | | mouseDown | google.maps.MapMouseEvent | This event is fired when the DOM mousedown event is fired on the rectangle. | | mouseMove | google.maps.MapMouseEvent | This event is fired when the DOM mousemove event is fired on the rectangle. | | mouseOut | google.maps.MapMouseEvent | This event is fired on rectangle mouseout. | | mouseOver | google.maps.MapMouseEvent | This event is fired on rectangle mouseover. | | mouseUp | google.maps.MapMouseEvent | This event is fired when the DOM mouseup event is fired on the rectangle. | | rightClick | google.maps.MapMouseEvent | This event is fired when the rectangle is right-clicked on. | --- [Index](#index) ##
exg-map-transit-layer ### example Adds a transit-layer to the map. ```html ``` --- [Index](#index) ##
exg-map-heatmap-layer ### example Adds a heatmap to the map. ```html ``` Default ```typescript const heatmapData = [ new google.maps.LatLng(37.782, -122.447), new google.maps.LatLng(37.782, -122.445), new google.maps.LatLng(37.782, -122.443), new google.maps.LatLng(37.782, -122.441), new google.maps.LatLng(37.782, -122.439), new google.maps.LatLng(37.782, -122.437), new google.maps.LatLng(37.782, -122.435), new google.maps.LatLng(37.785, -122.447), new google.maps.LatLng(37.785, -122.445), new google.maps.LatLng(37.785, -122.443), new google.maps.LatLng(37.785, -122.441), new google.maps.LatLng(37.785, -122.439), new google.maps.LatLng(37.785, -122.437), new google.maps.LatLng(37.785, -122.435) ]; ``` Weighted ```typescript const heatMapData = [ {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5}, new google.maps.LatLng(37.782, -122.445), {location: new google.maps.LatLng(37.782, -122.443), weight: 2}, {location: new google.maps.LatLng(37.782, -122.441), weight: 3}, {location: new google.maps.LatLng(37.782, -122.439), weight: 2}, new google.maps.LatLng(37.782, -122.437), {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5}, {location: new google.maps.LatLng(37.785, -122.447), weight: 3}, {location: new google.maps.LatLng(37.785, -122.445), weight: 2}, new google.maps.LatLng(37.785, -122.443), {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5}, new google.maps.LatLng(37.785, -122.439), {location: new google.maps.LatLng(37.785, -122.437), weight: 2}, {location: new google.maps.LatLng(37.785, -122.435), weight: 3} ]; ``` ### Definitions #### Inputs | name | type | default | description | |--------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | data | google.maps.MVCArraygoogle.maps.visualization.WeightedLocation>
(google.maps.LatLng
google.maps.visualization.WeightedLocation)[] | undefined | data of the heatmap | | dissipating | false | undefined | Specifies whether heatmaps dissipate on zoom. When dissipating is false the radius of influence increases with zoom level to ensure that the color intensity is preserved at any given geographic location. Defaults to true. | | gradient | string[] | undefined | The color gradient of the heatmap, specified as an array of CSS color strings. All CSS3 colors — including RGBA — are supported except for extended named colors and HSL(A) values. | | maxIntensity | number | undefined | The maximum intensity of the heatmap. By default, heatmap colors are dynamically scaled according to the greatest concentration of points at any particular pixel on the map. This property allows you to specify a fixed maximum. Setting the maximum intensity can be helpful when your dataset contains a few outliers with an unusually high intensity. | | radius | number | undefined | The radius of influence for each data point, in pixels. | | opacity | number | 1 | The opacity of the heatmap, expressed as a number between 0 and 1 |