Несколько ломаных к маркеру на картах Google api v3
Я пытаюсь направить несколько полилиний на определенный маркер на карте.
Я могу нарисовать полилинии для маркера, но когда я пытаюсь анимировать то же самое, работает только последняя полилиния. Ссылка ниже показывает карту, которую я сделал.
http://jsbin.com/ihugur/1/edit
Также это код:
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: 100%
}
var line;
var myLatlng = new google.maps.LatLng(41.7833, 5.2167);
var marker;
function initialize(){
var styles = [
{
"featureType": "administrative.country",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "landscape",
"stylers": [
{ "visibility": "on" },
{ "color": "#C0C0C0" }
]
},{
"featureType": "water",
"stylers": [
{ "visibility": "on" },
{ "color": "#FFFFFF" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
{ "visibility": "off" },
{ "color": "#efffff" }
]
},{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "transit",
"stylers": [
{ "visibility": "off" }
]
}
];
var symbolOne = {
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1
};
var domain = [new google.maps.LatLng(11.2583, 75.1374)];
var markers = [];
var mapOptions = {
zoom:2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
opacity: 0.2,
disableDefaultUI: true,
draggable: false,
styles: styles
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var lineCoordinates = [
new google.maps.LatLng(53.215556, 56.949219),
new google.maps.LatLng(75.797201, 125.003906),
new google.maps.LatLng(37.7833, 144.9667),
new google.maps.LatLng(-24.797201, 26.003906),
new google.maps.LatLng(27.797201, -101.003906)
];
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};
for(i=0;i