@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