@ng-maps/core

@ng-maps/core is a simple, modular and tree-shakable library for displaying google-maps inside an angular application

Installation

• Npm: npm install @ng-maps/core
• Yarn: yarn add @ng-maps/core

Then you will need to install typings for google maps as a dev dependency

• Npm: npm install -D @types/google.maps
• Yarn: yarn add -D @types/google.maps

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.

Lazy loading configuration

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.

Usage

Simple Map

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;
}

Input options

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

Marker

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>

Input options

| Name | Type | Values | Description | | --------- | ------ | ------ | ----------- | | longitude | Number | | latitude | Number |

Outputs

| Name | Value | Description | | ----------- | --------- | ----------- | | markerClick | Component |

Additional features

Other features are provided in submodules. Find out more on the project page at github