Skip to content
Branch: master
Find file History

Latest commit

crisbeto fix(google-maps): avoid errors when accessing API too early (#18376)
Fixes a bunch of errors that are thrown if we access the Google Maps-dependent methods before the API has loaded. We had everything typed correctly, but in all cases we were overriding the null checks.
Latest commit 591ac9c Feb 21, 2020

Files

Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
google-map fix(google-maps): internal events run inside NgZone (#18034) Jan 16, 2020
map-info-window fix(google-maps): avoid errors when accessing API too early (#18376) Feb 20, 2020
map-marker fix(google-maps): avoid errors when accessing API too early (#18376) Feb 20, 2020
map-polygon Merge google-maps-next branch into master (#18485) Feb 20, 2020
map-polyline fix(google-maps): avoid errors when accessing API too early (#18376) Feb 20, 2020
map-rectangle Merge google-maps-next branch into master (#18485) Feb 20, 2020
testing Merge google-maps-next branch into master (#18485) Feb 20, 2020
BUILD.bazel refactor: handle stubbed window in SSR checks (#17755) Nov 20, 2019
README.md docs(google-maps): add docs for Google Maps components (#17377) Oct 22, 2019
google-maps-module.ts Merge google-maps-next branch into master (#18485) Feb 20, 2020
index.ts feat(google-maps): add google-map component skeleton (#16623) Aug 8, 2019
map-event-manager.ts fix(google-maps): internal events run inside NgZone (#18034) Jan 16, 2020
package.json fix: google-maps and youtube-player package missing tslib dependency (#… Dec 11, 2019
public-api.ts Merge google-maps-next branch into master (#18485) Feb 20, 2020
tsconfig-tests.json build: remove release packaging gulp code (#17668) Nov 11, 2019
tsconfig.json build: do not generate type definitions without reference to needed g… Oct 11, 2019

README.md

Angular Google Maps component

This component provides a Google Maps Angular component that implements the Google Maps JavaScript API. File any bugs against the angular/components repo.

Installation

To install, run npm install @angular/google-maps.

Loading the API

  • First follow these steps to get an API key that can be used to load Google Maps.
  • Load the Google Maps JavaScript API.
  • The Google Maps JavaScript API must be loaded before the GoogleMap component.

GoogleMap

The GoogleMap component wraps the google.maps.Map class from the Google Maps JavaScript API. You can configure the map via the component's inputs. The options input accepts a full google.maps.MapOptions object, and the component additionally offers convenience inputs for setting the center and zoom of the map without needing an entire google.maps.MapOptions object. The height and width inputs accept a string to set the size of the Google map. Events can be bound using the outputs of the GoogleMap component, although events have the same name as native mouse events (e.g. mouseenter) have been prefixed with "map" as to not collide with the native mouse events. Other members on the google.maps.Map object are available on the GoogleMap component and can be accessed using the ViewChild decorator.

See the example below or the source to read the API.

MapMarker

The MapMarker component wraps the google.maps.Marker class from the Google Maps JavaScript API. The MapMarker component displays a marker on the map when it is a content child of a GoogleMap component. Like GoogleMap, this component offers an options input as well as convenience inputs for position, title, label, and clickable, and supports all google.maps.Marker events as outputs.

See the example below or the source to read the API.

MapInfoWindow

The MapInfoWindow component wraps the google.maps.InfoWindow class from the Google Maps JavaScript API. The MapInfoWindow has a options input as well as a convenience position input. Content for the MapInfoWindow is the inner HTML of the component, and will keep the structure and css styling of any content that is put there when it is displayed as an info window on the map.

To display the MapInfoWindow, it must be a child of a GoogleMap component, and it must have its open method called, so a reference to MapInfoWindow will need to be loaded using the ViewChild decorator. The open method accepts an MapMarker as an optional input, if you want to anchor the MapInfoWindow to a MapMarker.

See the example below or the source to read the API.

Example

// example-module.ts

import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {GoogleMapsModule} from '@angular/google-maps';

import {GoogleMapDemo} from './google-map-demo';

@NgModule({
  imports: [
    CommonModule,
    GoogleMapsModule,
  ],
  declarations: [GoogleMapDemo],
})
export class GoogleMapDemoModule {
}


// example-app.ts
import {Component, ViewChild} from '@angular/core';
import {MapInfoWindow, MapMarker} from '@angular/google-maps';

/** Demo Component for @angular/google-maps/map */
@Component({
  selector: 'google-map-demo',
  templateUrl: 'google-map-demo.html',
})
export class GoogleMapDemo {
  @ViewChild(MapInfoWindow, {static: false}) infoWindow: MapInfoWindow;

  center = {lat: 24, lng: 12};
  markerOptions = {draggable: false};
  markerPositions: google.maps.LatLngLiteral[] = [];
  zoom = 4;
  display?: google.maps.LatLngLiteral;

  addMarker(event: google.maps.MouseEvent) {
    this.markerPositions.push(event.latLng.toJSON());
  }

  move(event: google.maps.MouseEvent) {
    this.display = event.latLng.toJSON();
  }

  openInfoWindow(marker: MapMarker) {
    this.infoWindow.open(marker);
  }

  removeLastMarker() {
    this.markerPositions.pop();
  }
}
<!-- index.html -->
<!doctype html>
<head>
  ...
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
  </script>
</head>

<!-- example-app.html -->
<google-map height="400px"
            width="750px"
            [center]="center"
            [zoom]="zoom"
            (mapClick)="addMarker($event)"
            (mapMousemove)="move($event)"
            (mapRightclick)="removeLastMarker()">
  <map-marker #marker
              *ngFor="let markerPosition of markerPositions"
              [position]="markerPosition"
              [options]="markerOptions"
              (mapClick)="openInfoWindow(marker)"></map-marker>
  <map-info-window>Info Window content</map-info-window>
</google-map>

<div>Latitude: {{display?.lat}}</div>
<div>Longitude: {{display?.lng}}</div>
You can’t perform that action at this time.