StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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. </p> <p>long story short: </p> <p>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.</p> <pre><code>$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')}); }; </code></pre> <p>HTML Code:</p> <pre><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> </code></pre> <p>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:</p> <pre><code>$scope.$on('gmMarkersUpdated', function(event, objects) { if (objects === 'myObjects') { ... } }); </code></pre> <p>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:</p> <pre><code>$scope.$broadcast('gmMarkersRedraw', 'myObjects'); </code></pre> <p><a href="http://plnkr.co/edit/PYDYjVuRHaJpdntoJtqL?p=preview" rel="nofollow">Get Some Example Code here</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload