1

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>

1 respuesta 1

0

Vamos por parte... lo mas cómodo, no obligatorio, sería que los marcadores los vayas metiendo en un array a medidas que los vas declarando. Esto va a facilitarte manipularlos posteriormente sin tener que estar llamando a tus variables marker1, marker2, marker3...marker28. Por ejemplo para declararlos puedes crearte un for o foreach que vaya recorriendo un json o no se de donde sacas los datos y luego en cada iteracion lo vas declarando. Algo así:

for(i=0; i<list.length ; i++){
let marker1 = new google.maps.Marker({
        position: new google.maps.LatLng(19.334900, -99.185886),
        optimized: false,
        icon: iconBase, // Supongo que el icono base será el verde.
        title: 'Derecho 01',
        map: map
        });

}

Esto es solo un consejo, generalmente se los declara de este modo cuando trabajas con múltiples marcadores. Lo que vamos a hacer si no deseas modificar tu código es declarar un array donde vas a ir haciendo un push de cada marcador a medida que los vas declarando. Algo así:

var markers = []; // Este array posteriormente va a contener todos tus marcadores.

Cuando estés declarando un marcador le vas a agregar el push. Quedaría algo así:

    // 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
    });
    markers.push(marker1);

Ahora vamos a la parte interesante... la API de maps no tiene una funcion para refrescar los marcadores ni cambiarlos en tiempo de ejecucion, por lo tanto lo que vamos a hacer es trabajar con el metodo setMap() con este, vamos remover el marcador y luego recargarlo con la nueva imagen o icono, como le quieras llamar. Esto NO es lo mismo que recargar todo el mapa ni la pagina, solo va a recargar el marcador y es imperceptible, si no fuera por el cambio de color. Entonces cuando quieras hacer el cambio de colores en tus marcadores, lo puedes hacer del siguiente modo:

//Suponiendo que el semáforo va ser iniciado con un botón, este seria el evento.
function btnOnClick(){
  for(i=0; i< markers.length; i++){
    iniciarSemaforo(i);
  }
}

// Esta sería la función con la cual vas a editar la imagen y recargar el marcador. En este caso yo no me tomé el trabajo de hacer muchas animaciones, eso ya quedaría en vos acomodarlo a tu gusto y necesidad.
function iniciarSemaforo(index){
  setTimeout(function(){         markers[index].icon="http://maps.google.com/mapfiles/ms/icons/yellow-dot.png";
  markers[index].setMap(null);
  markers[index].setMap(map);
    setTimeout(function(){
           markers[index].icon="http://maps.google.com/mapfiles/ms/icons/red-dot.png";
  markers[index].setMap(null);
  markers[index].setMap(map);                    
  },2000);                      
  },2000);

}

Esto no solo te permite cambiar el icono. Puedes cambiar cualquier otra propiedad del marcador y funcionará también. Espero que te sirva, saludos!

1
  • Excelente!, muchas gracias, era lo que estaba buscando, excelente respuesta! gracias! el 26 dic. 2018 a las 16:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.