CODEWITHSUNDEEP
angularjsiconsmarkersangular-google-maps
Diane Wallace
Diane Wallace

Reputation: 13

Add custom marker icon to angular-google-maps when markers are from external JSON

I'm new to Angular (so probably am making some silly mistakes) and I'm trying to add some markers to a map instance with a custom image icon.

I understand that the best way to do this is to add this into the items as suggested by Fedaykin but is there a way to do this if you can't change the JSON file?

I was able to add the custom icon for a single marker, so I wondered if I could do the same for several markers using 'forEach', but although this shows all my markers it doesn't add the icon.

$scope.marker = Mapdata.query(function() {  

    var image = "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png";

    $scope.$watch('data', function(data) {
        angular.forEach($scope.marker, function(markerList, id, coords, icon) {
            $scope.markerList = [{

                id: data.id,
                coords: {
                    latitude: data.latitude,
                    longitude: data.longitude
                },

                icon: image

            }];
        });
    });

});

The html is just the usual angular-google-maps stuff

 <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
  <ui-gmap-markers models="marker.boards" coords="'self'" fit="'true'" icon="markerList.icon" click="'onClick'"></ui-gmap-markers>
</ui-gmap-google-map>

I have a plunker here to put it all in context.

Thanks for any help or advice :)

Upvotes: 1

Views: 1889

Answers (1)

Fissio
Fissio

Reputation: 3758

Made a few changes:

index.html

  • icon="markerList.icon" --> icon="'icon'"

script.js

I didn't quite understand what you were trying to to with the $watch - I ended up just setting the image attribute of each marker when the data is initially fetched.

  • Mapdata.query(function() { --> Mapdata.query(function(data) {

  • $scope.$watch thing -->

    angular.forEach(data.boards, function(board) {
    board.icon = image;
});

Here's the updated plunker.

Upvotes: 2

Related Questions