@ng-maps/core is a simple, modular and tree-shakable library for displaying google-maps inside an angular application
npm install @ng-maps/core
yarn add @ng-maps/core
Then you will need to install typings for google maps as a dev dependency
npm install -D @types/googlemaps
yarn add -D @types/googlemaps
Add NgMapsCoreModule
to your AppModule.
Additionally, you will need to add the @ng-maps/google
module and follow the instruction there. As alternative there is a here maps module which isn't ready for production yet.
If you can not provide configuration at module import level you can load it at a later time.
You just need to inject MapsAPILoader
into a component or service and call the method configure(config)
with a valid configuration.
Add the map to your components template
<map-view [latitude]="48.858222" [longitude]="2.2945" [zoom]="8"></map-view>
Add a height to your components CSS, for example
map-view {
height: 300px;
}
Name | Type | Values | Description |
---|---|---|---|
longitude | Number | ||
latitude | Number | ||
minZoom | Number | ||
maxZoom | Number | ||
zoom | Number | Between 0 and MaxZoom, typically 18 | |
fitBounds | LatLngBoundsLiteral, LatLngBounds or Boolean | If set to true attaches to mapFitBounds directives on <map-marker> |
|
mapTypeId | roadmap , hybrid , satellite , terrain |
||
layers | Array or String | TrafficLayer or TransitLayer or BicyclingLayer |
Activates layer as described in TrafficLayer Documentation |
Additionally you can add markers
<map-view [latitude]="48.858222" [longitude]="2.2945" [zoom]="8">
<map-marker [latitude]="48.858222" [longitude]="2.2945"></map-marker>
</map-view>
Name | Type | Values | Description |
---|---|---|---|
longitude | Number | ||
latitude | Number |
Name | Value | Description |
---|---|---|
markerClick | Component |
Other features are provided in submodules. Find out more on the project page at github