@ng-maps/core

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

Usage no npm install needed!

<script type="module">
  import ngMapsCore from 'https://cdn.skypack.dev/@ng-maps/core';
</script>

README

@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/googlemaps
  • Yarn: yarn add -D @types/googlemaps

Now you are ready to start. Add NgMapsCoreModule.forRoot({apiKey: 'YOUR_API_KEY'}) to your AppModule. Now you can use map components.

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