Marker Animation (Change color) on google maps

Navigation
1

I have a map of google maps with 28 markers perzonalizados, I would like to make each marker (image .png) change color in a time interval (Semaphore: green, yellow, red), how can I do it without having to be recharging the page so that the changes can be seen. I append my JS code where I am doing the "marker". Or is there another way to make the same icon change color in its attributes?

I tried to overwrite the icon attribute (with another png image) but it only works if I reload the whole page, and I do not want that, I would like it to be live. I tried to use the "setinterval" function but it did not work either. 

<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>
    
asked by Francisco Gonzalez 20.12.2018 в 23:33
source

1 answer

0

We go for part ... the most comfortable, not mandatory, would be that the markers you are putting in an array to measures that you are declaring. This will make it easier for you to manipulate them later without having to be calling your variables marker1, marker2, marker3 ... marker28. For example to declare them you can create a for foreach that goes through a json or do not know where you get the data and then in each iteration you declare it. Something like this: 

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
        });

}

This is just a tip, it is usually stated in this way when you work with multiple markers. What we are going to do if you do not want to modify your code is to declare an array where you will be doing a push of each marker as you declare them. Something like this: 

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

When you are declaring a marker you are going to add the push. It would be something like this: 

    // 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);

Now we go to the interesting part ... the maps API does not have a function to refresh the markers or change them at run time, so what we are going to do is work with the method setMap() with this, we will remove the marker and then reload it with the new image or icon, whatever you want to call it. This is NOT the same as reloading the entire map or the page, it will only reload the marker and is imperceptible, if it were not for the change of color. So when you want to change colors in your bookmarks, you can do it in the following way: 

//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);

}

This not only allows you to change the icon. You can change any other property of the marker and it will work as well. I hope you serve, greetings!

    
answered by 21.12.2018 / 19:53
source
Custom Tag in xml template Clone / an imageView when moving