CODEWITHSUNDEEP
angularjsgoogle-maps-api-3angularjs-directivegoogle-maps-markers
Uri
Uri

Reputation: 26976

How to change marker option in angularGM

I'm using http://angulargm.herokuapp.com/documentation/angulargm-0.3.1/api/angulargm.directive:gmMarkers directive to make a google map with markers with angularjs.

I want to be able to change markerOptions after their initial set or somehow get the google marker object from outside, so on a button click I can set animations to it, change the icon, etc'.

It seems that the directive parameter gm-get-marker-options is only used in the initial creation of the marker, because if I change the options it doesn't have any effect on the markers.

The only solution I have so far is to use the directive parameter gm-events to simulate a click on the required marker location, then use the marker object in the listener function to change the marker appearance, but this is problematic as I could have more than one marker with the same coordinates.

Perhaps I'm missing something?

This is now possible in the new angular-gm version 1.0.0. See the documentations about how to specify marker ids and use them. http://dylanfprice.github.io/angular-gm/1.0.0/docs/#/api/angulargm.directive:gmMarkers

Upvotes: 0

Views: 2132

Answers (2)

dylanfprice
dylanfprice

Reputation: 28

The only solution I have so far is to use the directive parameter gm-events to simulate a click on the required marker location, then use the marker object in the listener function to change the marker appearance, but this is problematic as I could have more than one marker with the same coordinates.

Perhaps I'm missing something?

No, you're not missing anything, this is a design flaw in the current version of AngularGM in that it uses the location as the single piece of identifying information for an object/marker. The markers-by-id branch will address this issue and hopefully I will be landing that soon.

As notsure said, the way to update the markers if you change one of your objects is to force a redraw via $scope.$broadcast('gmMarkersRedraw', 'myObjects').

Upvotes: 1

notsure
notsure

Reputation: 271

it is pretty easy to change the markers. As the angular plugin iterates through some list of markers and as you should use a scope variable angular handles the two way bindings.

long story short:

Here is a scope variable 'map_markers' which is a list of displayed markers. A function 'getPinImage' which returns a google maps icon. And a function which is triggered when you click on a marker on the map; it changes the color of the clicked marker.

$scope.map_markers = [
    {
        title: 'Marker one',
        location: {
            lat: 47.1212,
            lng: 10.3434
        }
    },
    {
        title: 'Marker two',
        location: {
            lat: 57.1212,
            lng: 20.3434
        }
    }
];

$scope.getPinImage = function(color) {
    // helper which returns a valid google maps marker image in
    // the given color
    color = color || '4EB1E8';
    var icon_api = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|";
    return new google.maps.MarkerImage(
        icon_api + color,
        new google.maps.Size(21, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));
};

$scope.triggerMe = function(object, marker, map) {
    // is executed on click, when clicking on a single marker on the map
    // changes the color of the selected marker and resets a prev clicked marker

    console.log('Click ', object, marker, map)

    if ($scope.prev_selected_marker) {
        $scope.prev_selected_marker.setOptions({icon: $scope.getPinImage()});
    }
    $scope.prev_selected_marker = marker;
    marker.setOptions({icon: $scope.getPinImage('FFFF00')});

};

HTML Code:

<gm-map gm-map-id="myMap">
    <gm-markers gm-objects="map_markers"
        gm-get-lat-lng="{ lat: object.location.lat, lng: object.location.lng }"
        gm-get-marker-options="{ icon: object.icon }"
        gm-on-click="triggerMe(object, marker, marker.getMap());">
    </gm-markers>
</gm-map>

To get a little deeper: When the marker object is edited AFTER your initial creation an event called 'gmMarkersUpdated' is triggerd, which you could listen to like this:

$scope.$on('gmMarkersUpdated', function(event, objects) {
    if (objects === 'myObjects') {
      ...
    }
});

However it is often not required to listen to these events, but if you really need to manually remove and redraw your markers you can broadcast this event and force it like this:

$scope.$broadcast('gmMarkersRedraw', 'myObjects');

Get Some Example Code here

Upvotes: 0

Related Questions