Google Maps

Component is build based on Angular Google Maps Component

Using Google Maps functionality requires to put apiKey in App module imports section like this:

AgmCoreModule.forRoot({
    apiKey: 'YOUR_GOOGLE_MAPS_API_KEY_HERE'
})

Second important moment is that in any place you want to use Google Map Component, you must set height of map like this:

/deep/ .sebm-google-map-container {
    height: 300px;
}

All events for each Map elements has a lot of different properties. Each event has one standard property called eventName by which event can be filtered inside events group described below.

Events are grouped into groups:

1. onMapEvents: here are events connected to map itself;

2. onMarkerEvents: here are events connected to markers;

3. onCircleEvents: here are events connected to circles;

4. onPolylineEvents: here are events connected to polylines;

5. onPolygonEvents: here are events connected to polygons.

Usage

app.html

<cf-google-maps #myMapComponent [properties]="myMap" [styling]="maMapStyling"
    (onMapEvents)="log($event)"
    (onMarkerEvents)="log($event)"
    (onCircleEvents)="log($event)"
    (onPolylineEvents)="log($event)"
    (onPolygonEvents)="log($event)">
</cf-google-maps>

app.ts

@ViewChild('myMapComponent') myMapComponent: CfGoogleMapsComponent;

myMap = new GoogleMapsModel({
    latitude: 0,
    longitude: 0,
    zoom: 1,
    usePanning: true,
    mapDraggable: this.located,
    mapTypeControl: true,
    markers: [],
    circles: [],
    polylines: [],
    polygons: []
});

maMapStyling = new GoogleMapsStylingModel({
    container: {
        class: 'my-google-map'
    }
});

app.scss

/deep/ {
  .sebm-google-map-container {
      height: 300px;
  }
  .my-google-map {
        border: 20px solid darkseagreen;
        border-radius: 8px;
        box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.3);
    }
}

Map input properties

Attr	Type	Details
latitude	number	The longitude that defines the center of the map.
longitude	number	The latitude that defines the center of the map.
zoom	number	The zoom level of the map. From 0 to 16. The default zoom level is 8.
mapDraggable	boolean	Enables/disables if map is draggable. Enabled by default.
usePanning	boolean	When true and the latitude and/or longitude values changes, the Google Maps panTo method is to the map. See: https://developers.google.com/maps/documentation/javascript/reference#Map
disableDoubleClickZoom	boolean	Enables/disables zoom and center on double click. Enabled by default.
disableDefaultUI	boolean	Enables/disables all default UI of the Google map. Please note: When the map is created, this cannot get updated.
scrollwheel	boolean	If false, disables scrollwheel zooming on the map. The scrollwheel is enabled by default.
backgroundColor	string	Color used for the background of the Map div. This color will be visible when tiles have not loaded as the user pans. This option can only be set when the map is initialized.
draggableCursor	string	The name or url of the cursor to display when mousing over a draggable map. This property uses css cursor attribute to change the icon. As with the css property, you must specify atone fallback cursor that is not a URL. For example: [draggableCursor]="'url(http://www.example.com/icon.png\, auto;'"
draggingCursor	string	The name or url of the cursor to display when the map is being dragged. This property uses the cursor attribute to change the icon. As with the css property, you must specify at leastfallback cursor that is not a URL. For example: [draggingCursor]="'url(http://www.example.com/icon.png\, auto;'"
keyboardShortcuts	boolean	If false, prevents the map from being controlled by the keyboard. Keyboard shortcuts are enabled by default.
zoomControl	boolean	The enabled/disabled state of the Zoom control.
styles	string	Styles to apply to each of the default map types. Note that for Satellite/Hybrid and Terrain, these styles will only apply to labels and geometry.
streetViewControl	boolean	The initial enabled/disabled state of the Street View Pegman control. Control is part of the default UI, and should be set to false when displaying a map type, which the Street View road overlay should not appear (e.g. a non-Earth map type).
fitBounds	boolean	Sets the viewport to contain the given bounds.
scaleControl	boolean	The initial enabled/disabled state of the Scale control. This is disabled by default.
mapTypeControl	boolean	The initial enabled/disabled state of the Map type control.
markers	GoogleMapsMarkerModel[]	Array with markers of type GoogleMapsMarkerModel
circles	GoogleMapsCircleModel[]	Array with circles of type GoogleMapsCircleModel
polylines	GoogleMapsPolylineModel[]	Array with polylines of type GoogleMapsPolylineModel
polygons	GoogleMapsPolygonModel[]	Array with polygones of type GoogleMapsPolygonModel

Map output properties

Event	Description
mapClick	This event emitter gets emitted when the user clicks on the map (but not when they click on a or infoWindow).
mapRightClick	This event emitter gets emitted when the user right-clicks on the map (but not when they click a marker or infoWindow).
mapDblClick	This event emitter gets emitted when the user double-clicks on the map (but not when they click a marker or infoWindow).
centerChange	This event emitter is fired when the map center changes.
idle	This event is fired when the map becomes idle after panning or zooming.
boundsChange	This event is fired when the viewport bounds have changed.
zoomChange	This event is fired when the zoom level has changed.

Map marker and it info window input properties

Attr	Type	Details
latitude	number	The latitude position of the marker.
longitude	number	The longitude position of the marker.
title	string	The title of the marker.
label	string	The label (a single uppercase character) for the marker.
markerDraggable	boolean	If true, the marker can be dragged. Default value is false.
iconUrl	string	Icon (the URL of the image) for the foreground.
openInfoWindow	boolean	Whether to automatically open the child info window when the marker is clicked.
opacity	number	The marker's opacity between 0.0 and 1.0.
visible	boolean	If true, the marker is visible
zIndex	number	All markers are displayed on the map in order of their zIndex, with higher values displaying in of markers with lower values. By default, markers are displayed according to their position on screen, with lower markers appearing in front of markers further up their.
Info	object	Object containing data for Marker Info Window. Object properties are: disableAutoPan, isOpen, zIndex, content (can be with html tags), maxWidth.
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.
isOpen	boolean	Sets the open state for the InfoWindow. You can also call the open() and close() methods.
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.
content	string	Some text or html.
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.

Map marker and it info window output properties

Event	Description
markerClick	This event emitter gets emitted when the user clicks on the marker.
dragEnd	This event is fired when the user stops dragging the marker.
mouseOver	This event is fired when the user mouses over the marker.
mouseOut	This event is fired when the user mouses outside the marker.
infoWindowClose	Emits an event when the info window is closed.

Map circle input properties

Attr	Type	Details
latitude	number	The latitude position of the circle (required).
longitude	number	The clickable position of the circle (required).
clickable	boolean	Indicates whether this Circle handles mouse events. Defaults to true.
circleDraggable	boolean	If set to true, the user can drag this circle over the map. Defaults to false.
editable	boolean	If set to true, the user can edit this circle by dragging the control points shown at center and around the circumference of the circle. Defaults to false.
fillColor	string	The fill color. All CSS3 colors are supported except for extended named colors.
fillOpacity	number	The fill opacity between 0.0 and 1.0.
radius	number	The radius in meters on the Earth's surface.
strokeColor	string	The stroke color. All CSS3 colors are supported except for extended named colors.
strokeOpacity	number	The stroke opacity between 0.0 and 1.0
strokePosition	string	The stroke position. Defaults to CENTER. property is not supported on Internet Explorer 8 and earlier.
strokeWeight	number	The stroke width in pixels.
visible	boolean	Whether this circle is visible on the map. Defaults to true.
zIndex	number	The zIndex compared to other polys.

Map circle output properties

Event	Description
centerChange	This event is fired when the circle's center is changed.
circleClick	This event emitter gets emitted when the user clicks on the circle.
circleDblClick	This event emitter gets emitted when the user clicks on the circle.
drag	This event is repeatedly fired while the user drags the circle.
dragEnd	This event is fired when the user stops dragging the circle.
dragStart	This event is fired when the user starts dragging the circle.
mouseDown	This event is fired when the DOM mousedown event is fired on the circle.
mouseMove	This event is fired when the DOM mousemove event is fired on the circle.
mouseOut	This event is fired on circle mouseout.
mouseOver	This event is fired on circle mouseover.
mouseUp	This event is fired when the DOM mouseup event is fired on the circle.
radiusChange	This event is fired when the circle's radius is changed.
rightClick	This event is fired when the circle is right-clicked on.

Map polyline and its points input properties

Attr	Type	Details
clickable	boolean	Indicates whether this Polyline handles mouse events. Defaults to true.
polylineDraggable	boolean	If set to true, the user can drag this shape over the map. The geodesic property defines the of dragging. Defaults to false.
editable	boolean	If set to true, the user can edit this shape by dragging the control points shown at the and on each segment. Defaults to false.
geodesic	boolean	When true, edges of the polygon are interpreted as geodesic and will follow the curvature of Earth. When false, edges of the polygon are rendered as straight lines in screen space. That the shape of a geodesic polygon may appear to change when dragged, as the dimensions maintained relative to the surface of the earth. Defaults to false.
strokeColor	string	The stroke color. All CSS3 colors are supported except for extended named colors.
strokeWeight	number	The stroke width in pixels.
strokeOpacity	number	The stroke opacity between 0.0 and 1.0.
visible	boolean	Whether this polyline is visible on the map. Defaults to true.
zIndex	number	The zIndex compared to other polys.
points	array	Array of line points. Each point is an object with two properties: latitude, longitude.

Map polyline and its points output properties

Event	Description
lineClick	This event is fired when the DOM click event is fired on the Polyline.
lineDblClick	This event is fired when the DOM dblclick event is fired on the Polyline.
lineDrag	This event is repeatedly fired while the user drags the polyline.
lineDragEnd	This event is fired when the user stops dragging the polyline.
lineMouseDown	This event is fired when the DOM mousedown event is fired on the Polyline.
lineMouseMove	This event is fired when the DOM mousemove event is fired on the Polyline.
lineMouseOut	This event is fired on Polyline mouseout.
lineMouseOver	This event is fired on Polyline mouseover.
lineMouseUp	This event is fired whe the DOM mouseup event is fired on the Polyline
lineRightClick	This even is fired when the Polyline is right-clicked on.
positionChanged	This event emitter gets emitted when the position of the point changed.

Map polygon input properties

Attr	Type	Details
clickable	boolean	Indicates whether this Polygon handles mouse events. Defaults to true.
polyDraggable	boolean	If set to true, the user can drag this shape over the map. The geodesic defines the mode of dragging. Defaults to false.
editable	boolean	If set to true, the user can edit this shape by dragging the control shown at the vertices and on each segment. Defaults to false.
fillColor	string	The fill color. All CSS3 colors are supported except for extended colors.
fillOpacity	number	The fill opacity between 0.0 and 1.0.
geodesic	boolean	When true, edges of the polygon are interpreted as geodesic and will the curvature of the Earth. When false, edges of the polygon areas straight lines in screen space. Note that the shape of a polygon may appear to change when dragged, as the dimensions maintained relative to the surface of the earth. Defaults to false.
paths	array	The ordered sequence of coordinates that designates a closed loop. A polygon may consist of one or more paths.a result, the paths property may specify one or more arrays of coordinates. Paths are closed automatically; do not repeat the vertex of the path as the last vertex. Simple polygons may be using a single array of LatLngs. More complex polygons mayan array of arrays. Any simple arrays are converted into Arrays or removing LatLngs from the Array will automatically update polygon on the map.
strokeColor	string	The stroke color. All CSS3 colors are supported except for extended colors.
strokeOpacity	number	The stroke opacity between 0.0 and 1.0
strokeWeight	number	The stroke width in pixels.
visible	boolean	Whether this polygon is visible on the map. Defaults to true.
zIndex	number	The zIndex compared to other polys.

Map polygon output properties

Event	Description
polyClick	This event is fired when the DOM click event is fired on the Polygon.
polyDblClick	This event is fired when the DOM dblclick event is fired on the Polygon.
polyDrag	This event is repeatedly fired while the user drags the polygon.
polyDragEnd	This event is fired when the user stops dragging the polygon.
polyMouseDown	This event is fired when the DOM mousedown event is fired on the Polygon.
polyMouseMove	This event is fired when the DOM mousemove event is fired on the Polygon.
polyMouseOut	This event is fired on Polygon mouseout.
polyMouseOver	This event is fired on Polygon mouseover.
polyMouseUp	This event is fired whe the DOM mouseup event is fired on the Polygon
polyRightClick	This even is fired when the Polygon is right-clicked on.