diff --git a/README.md b/README.md index cdf89c4..2852c24 100644 --- a/README.md +++ b/README.md @@ -105,44 +105,6 @@ getDirection() { } ``` -## Allow only one marker Infowindow to be open at one time - -HTML - -```html - - - - -``` - -TS - -```typescript -public lat: Number = 24.799448 -public lng: Number = 120.979021 - -public origin: {} -public destination: {} -public infowindow: InfoWindow = undefined - -ngOnInit() { - this.getDirection() -} - -getDirection() { - this.origin = { lat: 24.799448, lng: 120.979021 } - this.destination = { lat: 24.799524, lng: 120.975017 } - - // this.origin = 'Taipei Main Station' - // this.destination = 'Taiwan Presidential Office' -} - -obtainInfowindow(window: InfoWindow) { - this.infowindow = window -} -``` - ## Document - Document [Agm-Direction-Docs](https://robby570.tw/Agm-Direction-Docs/) - Less useful [AgmDirectionModule](https://robby570.tw/Agm-Direction/) diff --git a/package.json b/package.json index 76ddc17..9375530 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "agm-direction", "description": "directive for agm (not official)", - "version": "0.5.7", + "version": "0.5.8", "scripts": { "build": "gulp build", "build:watch": "gulp", diff --git a/playground/app.component.html b/playground/app.component.html index 63bd407..1ee8a19 100644 --- a/playground/app.component.html +++ b/playground/app.component.html @@ -5,7 +5,7 @@

Agm-Direction Playground -
- + \ No newline at end of file diff --git a/playground/index.ts b/playground/index.ts index 593a46b..2fe1b1b 100644 --- a/playground/index.ts +++ b/playground/index.ts @@ -8,7 +8,6 @@ import { Component } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AgmCoreModule } from '@agm/core'; -import { InfoWindow } from '@agm/core/services/google-maps-types'; import { AgmDirectionModule } from '../dist'; @Component({ @@ -33,22 +32,13 @@ class AppComponent { }, destination: { icon: 'https://i.imgur.com/7teZKif.png', - infoWindow: ` -

Hello

- Taiwan Tech - ` }, }; - infowindow: InfoWindow = undefined; - dirChange(event: any) { console.log(event); } - obtainInfowindow(window: InfoWindow) { - this.infowindow = window - } } @NgModule({ diff --git a/src/agm-direction.directive.ts b/src/agm-direction.directive.ts index dd8fbc7..7567304 100644 --- a/src/agm-direction.directive.ts +++ b/src/agm-direction.directive.ts @@ -1,6 +1,6 @@ import { Directive, Input, Output, OnChanges, OnInit, EventEmitter } from '@angular/core'; import { GoogleMapsAPIWrapper } from '@agm/core'; -import { InfoWindow } from '@agm/core/services/google-maps-types'; +import { InfoWindow, Marker, GoogleMap } from '@agm/core/services/google-maps-types'; declare var google: any; @Directive({ @@ -30,18 +30,18 @@ export class AgmDirection implements OnChanges, OnInit { @Input() visible: boolean = true; @Input() panel: object | undefined; @Input() markerOptions: { origin: any, destination: any }; - @Input() infowindow: InfoWindow = undefined; + @Input() infoWindow: InfoWindow = undefined; @Output() onChange: EventEmitter = new EventEmitter(); - @Output() sendInfowindow: EventEmitter = new EventEmitter(); + // @Output() sendInfowindow: EventEmitter = new EventEmitter(); public directionsService: any = undefined; public directionsDisplay: any = undefined; private isFirstChange: boolean = true; - private originMarker = undefined; - private destinationMarker = undefined; + private originMarker: Marker = undefined; + private destinationMarker: Marker = undefined; constructor( private gmapsApi: GoogleMapsAPIWrapper, @@ -96,7 +96,7 @@ export class AgmDirection implements OnChanges, OnInit { */ private directionDraw() { - this.gmapsApi.getNativeMap().then((map: any) => { + this.gmapsApi.getNativeMap().then((map: GoogleMap) => { if (typeof this.directionsDisplay === 'undefined') { this.directionsDisplay = new google.maps.DirectionsRenderer(this.renderOptions); @@ -129,6 +129,7 @@ export class AgmDirection implements OnChanges, OnInit { avoidHighways: this.avoidHighways, avoidTolls: this.avoidTolls, }, (response: any, status: any) => { + if (status === 'OK') { this.directionsDisplay.setDirections(response); @@ -190,26 +191,24 @@ export class AgmDirection implements OnChanges, OnInit { * Custom Origin and Destination Icon * * @private - * @param {object} map map - * @param {object} marker marker - * @param {object} markerOpts properties - * @param {string} content marker's infowindow content - * @returns {object} marker + * @param {GoogleMap} map map + * @param {Marker} marker marker + * @param {Object} markerOpts properties + * @param {String} content marker's infowindow content + * @returns {Marker} new marker * @memberof AgmDirection */ - private setMarker(map: any, marker: any, markerOpts: any, content: string) { - if (this.infowindow === undefined) { - this.infowindow = new google.maps.InfoWindow({}); - this.sendInfowindow.emit(this.infowindow); + private setMarker(map: GoogleMap, marker: Marker, markerOpts: any, content: string) { + if (typeof this.infoWindow === 'undefined') { + this.infoWindow = new google.maps.InfoWindow({}); + // this.sendInfowindow.emit(this.infoWindow); } marker = new google.maps.Marker(markerOpts); marker.addListener('click', () => { const infowindoContent: string = typeof markerOpts.infoWindow === 'undefined' ? content : markerOpts.infoWindow - this.infowindow.setContent(infowindoContent); - this.infowindow.open(map, marker); + this.infoWindow.setContent(infowindoContent); + this.infoWindow.open(map, marker); }); return marker; } } - - diff --git a/src/package.json b/src/package.json index 8fb93f7..c166ac8 100644 --- a/src/package.json +++ b/src/package.json @@ -1,7 +1,7 @@ { "name": "agm-direction", "description": "directive for agm (not official)", - "version": "0.5.7", + "version": "0.5.8", "repository": { "type": "git", "url": "https://github.com/explooosion/Agm-Direction"