Guarde uma referência do Marker
criado e reutilize-o, atualizando a posição via método setPosition()
dessa instância. Exemplo a seguir:
angular.module('myApp', []).
directive('myMap', function($timeout) {
var link = function(scope, element, attrs) {
var map, infoWindow;
var markers = [];
var currPos = {
x: 50,
y: 2
}; // <- Posição inicial
var mapOptions = {
center: new google.maps.LatLng(50, 2),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
function initMap() {
if (map === void 0) {
map = new google.maps.Map(element[0], mapOptions);
}
}
function setMarker(map, position, title, content) {
var marker;
var markerOptions = {
position: position,
map: map,
title: title,
icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
};
marker = new google.maps.Marker(markerOptions);
scope.marker = marker;
markers.push(marker);
}
// show the map and place some markers
initMap();
setMarker(map, new google.maps.LatLng(51.508515, -0.125487), 'Londres', 'xxxxxxxxx');
map.panTo(new google.maps.LatLng(51.508515, -0.125487));
floatABit = function() {
currPos.x = currPos.x + ((Math.random() * 50) - 25) / 50;
currPos.y = currPos.y + ((Math.random() * 50) - 25) / 50;
var ll = new google.maps.LatLng(currPos.x, currPos.y);
scope.marker.setPosition(ll);
map.panTo(ll); // Retire o comentárioComente para permitirinterromper o panning automático.
$timeout(floatABit, 500);
};
floatABit();
};
return {
restrict: 'A',
template: '<div id="gmaps"></div>',
replace: true,
link: link
};
});
#gmaps {
width: 100%;
height: 400px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div my-map=""></div>
</div>