codermoder codermoder - 1 month ago 9
Javascript Question

Angular google maps custom Icon only works when marker is updated

When I add a marker with a icon filed it appears as a default marker, however when I update the location in a while it starts to appear as a custom icon which I want.

map.html

<ui-gmap-google-map center="map.center"
control="map.control"
zoom="map.zoom"
options="map.options"
bounds="map.bounds"
draggable="true">
<ui-gmap-markers
models="markerArray"
coords="'self'"
icon="'icon'">
</ui-gmap-markers>
</ui-gmap-google-map>


map.js/addMarker (puts the marker, with the default icon)

function addMarker(markerId, latitude, longitude, icon, iconSize) {

markerIconSize = new google.maps.Size(iconSize[0],iconSize[1]);

var marker = {
id: markerId,
latitude: latitude,
longitude: longitude,
icon: {
url: icon,
scaledSize: markerIconSize
}
};
$scope.markers.push(marker);
$scope.markerArray = $scope.markers;
}


map.js/updateMarker (updates the coord. with the custom icon)

function updateMarker(markerId,latitude,longitude) {

var marker = _.find($scope.markerArray, function(marker) {
return marker.id = markerId;
});

marker.latitude = latitude;
marker.longitude = longitude;
}

Answer Source

Couple things I could think of: Try hard coding the icon url and see if that works. Then try to split marker declaration, so:

var marker;
var markerOptions = {
    id: markerId,
    latitude: latitude,
    longitude: longitude, 
    icon: {
        url: icon,
        scaledSize: markerIconSize
    }
};
marker = new google.maps.Marker(markerOptions);
$scope.markers.push(marker);
$scope.markerArray = $scope.markers;

This is how I made my map work so, just giving you a suggestion. Hope it works for you as well.