Jhonatan Sandoval
Jhonatan Sandoval

Reputation: 1293

Google Maps v3 - Overlap markers

I'm using Google Maps javascript v3 to print markers on the map, getting them from my database.

I need to put a marker overlapping another one. For example, I have my map like this:

enter image description here

I need to set the green marker over the orange one.

I thought It was enough if i order the query (ORDER BY) but it doesn't work.

Here is my javascript function:

function CargarJson() {
    $.ajax({
        url: '../view/cp_mapconductores_json.php',
        method: 'get',
        cache: false,
        success: function (data) {

            for (var i = 0; i < data.length; i++) {
                var datos = data[i];
                var LatLng = new google.maps.LatLng(datos.latitud, datos.longitud);

                var texto = datos.conductor + " / " + datos.marca + " " + datos.placa;

                var estado = datos.estado;
                var icono;

                if (estado == 0) { //inactivo
                    icono = "../images/taxi-blanco.png";
                } else if (estado == 1) { // disponible
                    icono = "../images/taxi-verde.png";
                } else if (estado == 2) { // ocupado
                    icono = "../images/taxi-naranja.png";
                } else {
                    icono = "../images/taxi-negro.png";
                }


                var marcador = new google.maps.Marker({
                    position: LatLng,
                    map: map,
                    title: texto,
                    icon: icono
                });
                markers.push(marcador);
                var infoWindow = new google.maps.InfoWindow();

                (function (marcador, datos) {
                    google.maps.event.addListener(marcador, 'click', function (e) {
                        infoWindow.setContent('<b>' + datos.conductor + '</b> <br>'
                            + datos.marca + ' ' + datos.placa);
                        infoWindow.open(map, marcador);
                    });
                })(marcador, datos);

            }

        },
        error: function () {
            alert("Se produjo un error en la lectura de datos!");
        }
    });

}

Thanks for answer.

Upvotes: 0

Views: 1123

Answers (1)

geocodezip
geocodezip

Reputation: 161384

Use the zIndex property of the MarkerOptions:

zIndex | number | All markers are displayed on the map in order of their zIndex, with higher values displaying in front of markers with lower values. By default, markers are displayed according to their vertical position on screen, with lower markers appearing in front of markers further up the screen.

Upvotes: 1

Related Questions