javascript - Angular-google-maps: Circle object click events, how to send information to controller on click event? -

i'm trying set angular-google-maps -display. have objects i'm using marker models follows:

<ui-gmap-google-map center='map.center' zoom='map.zoom'>   <ui-gmap-markers     models="myobjects"     coords="'self'"     icon="'icon'"     idkey="'id'"     click="mappinclick">   </ui-gmap-markers> </ui-gmap-google-map> 

and icon i'm using orange circle .png display selected objects on map. pros of approach:

• due 'models' attribute, click event sends model can use in controller.

• i'm planning add custom cluster functionality @ point, , directive seems offer straight support such (minor though).

cons:

• when zooming in , out, icons overlap each other.

• the markers positioned above actual coordinates, default google map markers are. i'd want them on exact coordinates of objects.

as workaround, tried using google map circle:

<ui-gmap-google-map center='map.center' zoom='map.zoom'>   <ui-gmap-circle      ng-repeat="object in myobjects"     radius="15"     stroke="{color: '#df6c0a', weight: 1, opacity: 1.0}"     fill="{color: '#df6c0a', opacity: 0.8}"     center="{latitude: object.latitude, longitude: object.longitude}"     events="{ click: mappinclick }"     clickable=true>   </ui-gmap-circle> </ui-gmap-google-map> 

with approach, pros , cons seem turn upside down: circle size scales depending on zoom level , they're accurately positioned, can't access model attributes of object in previous approach, , fear cluster functionality might more difficult implement using approach.

since cluster thing isn't on top of priorities, i'd love use circle approach if somehow transmit information object controller click event. tried including custom attribute

customattribute="object.information" 

and console.log():ing parameters come click event see if attribute included in 1 of them, it's not showing @ all. tried include object parameter of click event like

events="{ click: mappinclick(object) }" 

but ended somehow calling click function on , on again , crashing app.

any suggestions on how continue here highly appreciated.

this has been resolved now, came across problem today thought i'd share how solved it.

the problem google maps event listeners not return reference original object.

in order click event interact object, need instantiate object event listener object. following:

var vm = this; vm.myobjects = []; var newobj = {}; var sum = 0;  function logidx() {   console.log(newobj.idx);   sum += newobj.idx;   console.log(sum); }  for(var i=1; i<25; i++) {    newobj = {     idx: i,     events: {       click: logidx     }   };    vm.myobjects.push(newobj);  } 

note name of newobj.events paramaters match google maps event listener names.

in html, following:

<ui-gmap-google-map center='vm.map.center' zoom='vm.map.zoom'>   <ui-gmap-circle      ng-repeat="object in vm.myobjects"     radius="15"     stroke="{color: '#df6c0a', weight: 1, opacity: 1.0}"     fill="{color: '#df6c0a', opacity: 0.8}"     center="{latitude: object.latitude, longitude: object.longitude}"     events="object.events"     clickable=true>   </ui-gmap-circle> </ui-gmap-google-map> 

i'd recommend moving of logic can out of html , putting in js. could, example, put entire center object inside of myobjects objects.