javascript - angularjs-google-maps - info-window does not work with ng-repeat -
i use google maps ng-map , use markers , info-windows attached these markers added map ng-repeat. angular view following:
<div id="mapwrap" map-lazy-load="https://maps.google.com/maps/api/js"> <map center="current-location" zoom="9" on-bounds_changed="getlocations()"> <marker ng-repeat="mymarker in mymarkers" clickable="true" on-click="showinfowindow(event, '{{mymarker.infowindowid}}')" id="{{mymarker.id}}" position="[{{mymarker.lat}},{{mymarker.lon}}]" title="{{mymarker.title}}" draggable="false" opacity="{{mymarker.opacity}}" visible="{{mymarker.visible}}" icon="{{mymarker.icon}}"> </marker> <info-window ng-repeat="infowindow in infowindows" id="{{infowindow.id}}" visible-on-marker="{{infowindow.markerid}}"> <div ng-non-bindable=""> <h1>{{infowindow.name}}</h1> <p>{{infowindow.text}}</p> <a href="{{infowindow.url}}">get forecast</a> </div> </info-window> </map> </div>
the mymarker.infowindowid
correspond infowindow.id
, mymarker.id
infowindow.markerid
. there seems no issue in that, markers , infowindows listed fine in dom after loading view , controller.
the markers shown fine on map, updated when on-bounds_changed="getlocations()"
function executed.
the list of info-windows updated in getlocations()
too, markers , info-windows can seen in dom, info-windows not shown when click on corresponding marker. tried using single info-window item in view , update content when user clicks on marker, nothing changed.
can please point me in right direction not doing right here? thank you.
a second question: if must use ng-non-bindable
in info-window content (ng-map complains otherwise), how can dynamically update/generate content of info-window? issue should show after infow-windows shown.
sorry late response.
short answer, info-window
must not used ng-repeat
.
http://plnkr.co/edit/lbxdmm?p=preview
<marker ng-repeat="mymarker in mymarkers" name="a" text="b" url="http://foo.bar" clickable="true" on-click="showinfowindow('myinfowindow')" id="{{mymarker.id}}" position="[{{mymarker.lat}},{{mymarker.lng}}]" draggable="false" opacity="{{mymarker.opacity}}"> </marker> <info-window id="myinfowindow"> <div ng-non-bindable=""> <h1>{{this.name}}</h1> <p>{{this.text}}</p> <a href="{{this.url}}">get forecast</a> </div> </info-window>
Comments
Post a Comment