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

Question

I'm trying to set up an angular-google-maps -display. I have objects that I'm using as marker models as 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 as an icon I'm currently using an orange circle .png to display the selected objects on the map. The pros of this approach:

• Due to the 'models' attribute, the click event sends the model that I can use easily in my controller.

• I'm planning to add custom cluster functionality at some point, and the directive seems to offer straight support for such (minor though).

Cons:

• When zooming in and out, the icons overlap with each other.

• The markers are positioned slightly above the actual coordinates, like the default google map markers are. I'd want them to be on the exact coordinates of my objects.

As a workaround, I tried using a 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 this approach, the pros and cons seem to turn upside down: The circle size scales depending on zoom level and they're accurately positioned, but I can't access the model attributes of object like I could in the previous approach, and I fear the cluster functionality might be more difficult to implement using this approach.

Since the cluster thing isn't on top of my priorities, I'd love to use the circle approach if I could somehow transmit information about object to my controller with the click event. I tried including a custom attribute like

customAttribute="object.information"

and console.log():ing all the parameters that come with the click event to see if the attribute would be included in one of them, but it's not showing up at all. I also tried to include the object as a parameter of the click event like

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

but that ended up somehow calling the click function over and over again and basically crashing my app.

Any suggestions on how to continue from here would be highly appreciated.

Answer 1

This has probably been resolved by now, but I came across the problem today so I thought I'd share how I solved it.

The problem is that the Google Maps event listeners do not return a reference to your original object.

In order to get the click event to interact with your object, you need to instantiate the object with the event listener object. Something like the 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 that the name of the newObj.events paramaters match the Google Maps event listener names.

In your HTML, you would then do the 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 as much of the logic as you can out of the HTML and putting it in your JS. You could, for example, put the entire center object inside of your myObjects objects.