Tengo un mapa de google maps con 28 marcadores perzonalizados, quisiera hacer que cada marcador (imagen .png) cambie de color en un intervalo de tiempo (Semaforo: verde, amarillo,rojo), como puedo hacerlo sin tener que estar recargando la pagina para que se vean los cambios. Anexo mi codigo JS donde estoy haciendo los "marker". O existe alguna otra manera de hacer que el mismo icono cambie de color en sus atributos?
He intentado sobrescribir el atributo de icon (con otra imagen png) pero solo funciona si recargo toda la pagina, y no quiero eso, me gustaria que fuera en vivo. Intente usar la funcion "setinterval" pero tampoco me funciono.
<script type="text/javascript" >
var map;
var initMap = function() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(19.333200, -99.183084),
mapTypeId: 'roadmap'
});
var iconBase = {
url: '/img/semaforo.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(32, 32),
scaledSize: new google.maps.Size(24, 24),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 10)
};
var iconBase4 = {
url: /'img/semaforoamarillo.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(32, 32),
scaledSize: new google.maps.Size(24, 24),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 10)
};
var iconBase1 = {
url: '/img/peatonal.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(32, 32),
scaledSize: new google.maps.Size(24, 24),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(20, 30)
};
var iconBase2 = {
url: '/img/semaforoHori.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(32, 32),
scaledSize: new google.maps.Size(24, 24),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(12, 20)
};
var iconBase3 = {
url: '/img/peatonalHori.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(32, 32),
scaledSize: new google.maps.Size(24, 24),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(12, 15)
};
// marcador 1
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(19.334900, -99.185886),
optimized: false,
icon: iconBase,
title: 'Derecho 01',
map: map
});
// InfoWindow para el marcador 1
var infowindow1 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker1, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow1.open(map, marker1);
});
// final del marcador 1-----------------------------------------
// marcador 2
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(19.335195, -99.185886),
optimized: false,
icon: iconBase1,
title: 'Derecho 01',
map: map
});
// final del marcador 2-----------------------------------------
//marker1.icon = iconBase4;
//Intervalo de tiempo para los semaforos 1 y 2
//setInterval(cambiarImagen(),6000);
// function cambiarImagen(){
// marker1.icon = iconBase4;
//}
marker1.icon = iconBase4;
//setTimeout(funcAvisa(),1000);
//function funcAvisa(){
// marker1.icon = iconBase2;
//}
/*se la llama a los 10 segundos*/
// marcador 3
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(19.334938, -99.184793),
optimized: false,
icon: iconBase,
title: 'Derecho 02',
map: map
});
// InfoWindow para el marcador 3
var infowindow3 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker3, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow3.open(map, marker3);
});
// final del marcador 3-----------------------------------------
// marcador 4
var marker4 = new google.maps.Marker({
position: new google.maps.LatLng(19.335138, -99.184797),
optimized: false,
icon: iconBase1,
title: 'Derecho 02',
map: map
});
// final del marcador 4-----------------------------------------
// marcador 5
var marker5 = new google.maps.Marker({
position: new google.maps.LatLng(19.335799, -99.183626),
optimized: false,
icon: iconBase,
title: 'Economia 02',
map: map
});
// InfoWindow para el marcador 5
var infowindow5 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker5, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow5.open(map, marker5);
});
// final del marcador 5 ----------------------------------------
// marcador 6
var marker6 = new google.maps.Marker({
position: new google.maps.LatLng(19.335660, -99.183620),
optimized: false,
icon: iconBase1,
title: 'Economia 02',
map: map
});
// final del marcador 6 ---------------------------------------
// marcador 7
var marker7 = new google.maps.Marker({
position: new google.maps.LatLng(19.335154, -99.183526),
optimized: false,
icon: iconBase,
title: 'Economia 01',
map: map
});
// InfoWindow para el marcador 7
var infowindow7 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker7, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow7.open(map, marker7);
});
// final del marcador 7 ---------------------------------------
// marcador 8
var marker8 = new google.maps.Marker({
position: new google.maps.LatLng(19.335230, -99.183530),
icon: iconBase1,
title: 'Economia 01',
map: map
});
// final del marcador 8 ---------------------------------------
// marcador 9
var marker9 = new google.maps.Marker({
position: new google.maps.LatLng(19.334810, -99.180990),
icon: iconBase,
title: 'Odontologia',
map: map
});
// InfoWindow para el marcador 9
var infowindow9 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker9, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow9.open(map, marker9);
});
// final del marcador 9-----------------------------------------
// marcador 10
var marker10 = new google.maps.Marker({
position: new google.maps.LatLng(19.334900, -99.180956),
icon: iconBase1,
title: 'Odontologia',
map: map
});
// final del marcador 10----------------------------------------
// marcador 11
var marker11 = new google.maps.Marker({
position: new google.maps.LatLng(19.334404, -99.179763),
icon: iconBase,
title: 'Medicina',
map: map
});
// InfoWindow para el marcador 11
var infowindow11 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker11, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow11.open(map, marker11);
});
// final del marcador 11-----------------------------------------
// marcador 12
var marker12 = new google.maps.Marker({
position: new google.maps.LatLng(19.334494, -99.179739),
icon: iconBase1,
title: 'Medicina',
map: map
});
// final del marcador 12 ----------------------------------------
// marcador 13
var marker13 = new google.maps.Marker({
position: new google.maps.LatLng(19.333382, -99.178268),
icon: iconBase,
title: 'Cerro del Agua 03',
map: map
});
// InfoWindow para el marcador 13
var infowindow13 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker13, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow13.open(map, marker13);
});
// final del marcador 13 ----------------------------------------
// marcador 14
var marker14 = new google.maps.Marker({
position: new google.maps.LatLng(19.333382, -99.178350),
icon: iconBase1,
title: 'Cerro del Agua 03',
map: map
});
// final del marcador 14 ----------------------------------------
// marcador 15
var marker15 = new google.maps.Marker({
position: new google.maps.LatLng(19.333273, -99.178767),
icon: iconBase,
title: 'Cerro del Agua 01',
map: map
});
// InfoWindow para el marcador 15
var infowindow15 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker15, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow15.open(map, marker15);
});
// final del marcador 15 ----------------------------------------
// marcador 16
var marker16 = new google.maps.Marker({
position: new google.maps.LatLng(19.333273, -99.178690),
icon: iconBase1,
title: 'Cerro del Agua 01',
map: map
});
// final del marcador 16------------------------------------------
// marcador 17
var marker17 = new google.maps.Marker({
position: new google.maps.LatLng(19.333255, -99.178460),
icon: iconBase2,
title: 'Cerro del Agua 05',
map: map
});
// InfoWindow para el marcador 17
var infowindow17 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker17, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow17.open(map, marker17);
});
// final del marcador 17------------------------------------------
// marcador 18
var marker18 = new google.maps.Marker({
position: new google.maps.LatLng(19.333100, -99.178438),
icon: iconBase3,
title: 'Cerro del Agua 05',
map: map
});
// final del marcador 18-------------------------------------------
// marcador 19
var marker19 = new google.maps.Marker({
position: new google.maps.LatLng(19.332807, -99.178810),
icon: iconBase,
title: 'Cerro del Agua 02',
map: map
});
// InfoWindow para el marcador 19
var infowindow19 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker19, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow19.open(map, marker19);
});
// final del marcador 19--------------------------------------------
// marcador 20
var marker20 = new google.maps.Marker({
position: new google.maps.LatLng(19.332807, -99.178630),
icon: iconBase1,
title: 'Cerro del Agua 02',
map: map
});
// final del marcador 20--------------------------------------------
// marcador 21
var marker21 = new google.maps.Marker({
position: new google.maps.LatLng(19.332807, -99.178334),
icon: iconBase,
title: 'Cerro del Agua 04',
map: map
});
// InfoWindow para el marcador 21
var infowindow21 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker21, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow21.open(map, marker21);
});
// final del marcador 21--------------------------------------------
// marcador 22
var marker22 = new google.maps.Marker({
position: new google.maps.LatLng(19.332807, -99.178438),
icon: iconBase1,
title: 'Cerro del Agua 04',
map: map
});
// final del marcador 22-------------------------------------------
// marcador 23
var marker23 = new google.maps.Marker({
position: new google.maps.LatLng(19.330870, -99.180905),
icon: iconBase,
title: 'Quimica',
map: map
});
// InfoWindow para el marcador 23
var infowindow23 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker23, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow23.open(map, marker23);
});
// final del marcador 23-------------------------------------------
// marcador 24
var marker24 = new google.maps.Marker({
position: new google.maps.LatLng(19.330770, -99.180909),
icon: iconBase1,
title: 'Quimica',
map: map
});
// final del marcador 24-------------------------------------------
// marcador 25
var marker25 = new google.maps.Marker({
position: new google.maps.LatLng(19.330742, -99.184552),
icon: iconBase,
title: 'Ingenieria',
map: map
});
// InfoWindow para el marcador 25
var infowindow25 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker25, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow25.open(map, marker25);
});
// final del marcador 25-------------------------------------------
// marcador 26
var marker26 = new google.maps.Marker({
position: new google.maps.LatLng(19.330542, -99.184556),
icon: iconBase1,
title: 'Ingenieria',
map: map
});
// final del marcador 26-------------------------------------------
// marcador 27
var marker27 = new google.maps.Marker({
position: new google.maps.LatLng(19.330569, -99.186440),
icon: iconBase,
title: 'Arquitectura',
map: map
});
// InfoWindow para el marcador 27
var infowindow27 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker27, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow27.open(map, marker27);
});
// final del marcador 27-------------------------------------------
// marcador 28
var marker28 = new google.maps.Marker({
position: new google.maps.LatLng(19.330369, -99.186444),
icon: iconBase1,
title: 'Arquitectura',
map: map
});
/* InfoWindow para el marcador 28
var infowindow28 = new google.maps.InfoWindow({
content: 'Barcelona'
});
// Añadimos un evento de clic al marcador
google.maps.event.addListener(marker28, 'click', function() {
// Llamamos el método open del InfoWindow
infowindow28.open(map, marker28);
});*/
// final del marcador 28---------------------------------------------
//Cambiar de color cierto tiempo
/*function changeColor() {
iconBase.background-color('#FFFFF');
iconBase1.background-color('#00000');
}
setInterval(changeColor, 3000);*/
}
</script>