๋ฌธ์ ์ค๋ช
๋ง์ปค ์์ด agm-snazzy-info-window๋ฅผ ์ฌ์ฉํ๋ ค๊ณ ํ๋๋ฐ ์ด ์ฐฝ์ ๋ ๋๋งํ ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
๋ค์์ ์ฝ๋์
๋๋ค.
<div *ngIf="selectedMarker" >
<agm-snazzy-info-window
[latitude]="selectedMarker.latitude"
[longitude]="selectedMarker.longitude"
[isOpen]="true">
{{selectedMarker.id}}
</agm-snazzy-info-window>
</div>
_๋ฐ๋ชจ์์ ๋ฌธ์ ๋ฅผ ํ์ธํ๋ ค๋ฉด ์ด๋ค ๋จ๊ณ๋ฅผ ์๋ํด์ผ ํฉ๋๊น?_
agm-snazzy-info-window UI ๊ตฌ์ฑ ์์ ์ถ๊ฐ, ์ ๋ ฅ ๋งค๊ฐ๋ณ์ ์ค์ [isOpen]="true"
ํ์ฌ ํ๋
์ฝ์ ์ค๋ฅ:
core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'createEmbeddedView' of undefined
TypeError: Cannot read property 'createEmbeddedView' of undefined
at ViewContainerRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewContainerRef_.createEmbeddedView (core.es5.js:10056)
at AgmSnazzyInfoWindow.webpackJsonp.../../../../@agm/snazzy-info-window/directives/snazzy-info-window.js.AgmSnazzyInfoWindow._createViewContent (snazzy-info-window.js:154)
at snazzy-info-window.js:140
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392)
at Object.onInvoke (core.es5.js:3890)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:142)
at zone.js:844
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ViewContainerRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewContainerRef_.createEmbeddedView (core.es5.js:10056)
at AgmSnazzyInfoWindow.webpackJsonp.../../../../@agm/snazzy-info-window/directives/snazzy-info-window.js.AgmSnazzyInfoWindow._createViewContent (snazzy-info-window.js:154)
at snazzy-info-window.js:140
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392)
at Object.onInvoke (core.es5.js:3890)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:142)
at zone.js:844
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at resolvePromise (zone.js:795)
at zone.js:847
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at <anonymous>
angular2 ๋ฐ angular-google-maps ๋ฒ์
"agm/core": "1.0.0-beta.1",
"agm/snazzy-info-window": "1.0.0-beta.1",
"snazzy-info-window": "1.1.0",
๊ธฐํ ์ ๋ณด
ํ ํ๋ฆฟ์์ [isOpen] ๋งค๊ฐ๋ณ์๋ฅผ ์ ๊ฑฐํ๋ฉด ์ค๋ฅ๊ฐ ์ฌ๋ผ์ง๋๋ค.
์ฌ๊ธฐ๋ ๋ง์ฐฌ๊ฐ์ง...
๊ฐ์ ๋ฌธ์ ๊ฐ์์์ต๋๋ค. ์ฌ๊ธฐ์์ ๋ฌธ์๋ฅผ ํ์ธํ ํ
https://angular-maps.com/guides/snazzy-info-window/custom-info-windows-with-snazzy-info-window/ ์ฝํ
์ธ ๋ฅผ <ng-template>
๋ํํด์ผ ํ๋ค๋ ๊ฒ์ ์์์ต๋๋ค. <agm-snazzy-info-window>
์ ์๋ํฉ๋๋ค.
๊ทธ๋ฆฌ๊ณ ๊ทธ๊ฒ์ ํจ๊ณผ๊ฐ ์์๋ค :)
์ด ๋ฌธ์ ๋ ์ต๊ทผ ํ๋์ด ์์๊ธฐ ๋๋ฌธ์ ์๋์ผ๋ก ์ค๋๋ ๊ฒ์ผ๋ก ํ์๋์์ต๋๋ค. ๋ ์ด์ ํ๋์ด ์์ผ๋ฉด ํ์๋ฉ๋๋ค. ๊ทํ์ ๊ธฐ์ฌ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๊ฐ์ ๋ฌธ์ ๊ฐ์์์ต๋๋ค. ์ฌ๊ธฐ์์ ๋ฌธ์๋ฅผ ํ์ธํ ํ
https://angular-maps.com/guides/snazzy-info-window/custom-info-windows-with-snazzy-info-window/ ์ฝํ ์ธ ๋ฅผ
<ng-template>
๋ํํด์ผ ํ๋ค๋ ๊ฒ์ ์์์ต๋๋ค.<agm-snazzy-info-window>
์ ์๋ํฉ๋๋ค.๊ทธ๋ฆฌ๊ณ ๊ทธ๊ฒ์ ํจ๊ณผ๊ฐ ์์๋ค :)