You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →

Book a Demo Install Sign in

ngx-google-maps-places-api

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-google-maps-places-api

Angular library that provides a seamless integration with new Google Maps Places API, offering easy-to-use services for place details retrieval and management in Angular applications.

20.3.0

latest

stable

Source

npm

Version published: 2 weeks ago

Weekly downloads: 139

Maintainers: 1

Weekly downloads

Created: 10 months ago

Source

Angular Google Maps Places API

Angular Google Maps Places Logo
Angular library that provides a seamless integration with new Google Maps Places API, offering easy-to-use services for place details retrieval and management in Angular applications.
Compatible with Angular **>= 18.x.x**. See Versioning.

Demo

Example

Features

Autocomplete suggestions for places
Place details fetching
Address component parsing

Installation

npm install --save ngx-google-maps-places-api

Getting the API Key

Follow these steps to get an API key that can be used to load Google Maps.

Loading the API

Include the Dynamic Library Import script in the index.html of your app. When a Google Map is being rendered, it'll use the Dynamic Import API to load the necessary JavaScript automatically.

<!-- index.html -->
<!DOCTYPE html>
<body>
  ...
  <script>
    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
      v: "weekly",
      key: YOUR_API_KEY_GOES_HERE
    });
  </script>
</body>
</html>

Note: the component also supports loading the API using the legacy script tag, however it isn't recommended because it requires all of the Google Maps JavaScript to be loaded up-front, even if it isn't used.

Usage

Inject the NgxGoogleMapsPlacesApiService in your Angular component/directive/etc:

import { Directive, inject } from '@angular/core';
import { NgxGoogleMapsPlacesApiService } from 'ngx-google-maps-places-api';

@Directive({
  selector: 'app-test',
  standalone: true
})
export class AppTestDirective {
  private readonly _ngxGoogleMapsPlacesApiService = inject(NgxGoogleMapsPlacesApiService);
  // Use the service methods
}

Versioning

Library tested for Angular versions >= 18.x.x.

Versions are consistent with major Angular version. E.g.:

Use v18.x.x with Angular 18.x.x.

Dependencies

Angular
RxJs

API reference