¿Cómo ocultar o mostrar un grupo de #markers en el #API de #GoogleMaps? #ApiV3

23 thoughts on “¿Cómo ocultar o mostrar un grupo de #markers en el #API de #GoogleMaps? #ApiV3”

1. Hola,

   Muy bueno el artículo.

   Con tu código estoy intentando añadir ventanas de info a cada marker pero no lo consigo con este método.

   google.maps.event.addListener(marker, ‘click’, function() {
   infowindow.open(map,marker);

   ¿Podrías ayudarme?

   Responder

   1. te anexo un ejemplo que hice para responderte:

      https://hdeleon.net/como-abrir-una-ventana-con-informacion-dar-clic-en-nuestro-marker-googlemaps-infowindow/

      Responder

      1. Gracias por la rápida respuesta. He leido tu ejemplo y asi es como lo tenía.

         Te paso la url y le echas un vistazo? El problema igual radica en como llamo al marker aquí:

         “google.maps.event.addListener(marker, ‘click’, function() {infowindow.open(map,marker);”

         Tu lo inicializas así:

         ” TipoMarkerAzul1.marker = new google.maps.Marker({..”

         pero luego como lo invocas de nuevo? TipoMarkerAzul1.marker, TipoMarkerAzul1….

         http://dognosti.com/mapa

         Gracias

         PD. Solo he puesto el marker azul de la izquierda.

         Responder

         1. Te anexo una liga a un ejemplo que te programe para que vieras como puedes hacerlo, el codigo es igual a el de este ejemplo a excepción de que anexe entre este bloque el codigo que abre los infoWindow:

            /*

            Codigo InfoWindow

            *********************************************************/

            https://hdeleon.net/tutoriales/maps/showHideMarkersGoogleMapsInfoWindow.html

            Responder

            1. Mil gracias y un saludo!!

2. hola , y como haces para poner “mi posicion” y ademas que al hacer click en las marcas se abra una ventana con la info de cada una en forma distinta .
   gracias

   Responder

   1. a ver si te sirve esto:

      https://hdeleon.net/como-abrir-una-ventana-con-informacion-dar-clic-en-nuestro-marker-googlemaps-infowindow/

      Responder

3. en realidad me gusta el ejemplo de mostrar o no las azules o las rojas , te consulto como agregar otra marca con “mi posicion” o geolocalizacion y ademas que el infowindow muestre cada uno su info y no algo generico como “esta es la marca roja ” o “esta es la marca azul”

   Responder

   1. Que lenguaje de programación estas utilizando? con el lenguaje del servidor ya sea php,asp,java, puedes generar el contenido dinamico de los markers y a estos asignarles la info como string como la otra url.

      Responder

4. no soy programador , pense que tenias algun ejemplo o que podrias decirme como agragarlo a este

   Responder

   1. Dame unas horas y subo un post con la respuesta, saludos.

      Responder

      1. ok , muchas gracias !

         Responder

5. Esta genial! era lo que estaba buscando, solo que nose si me puedas ayudar, como seria si los datos se hacen de manera dinamica, osea que esten en una base de datos MySQL, agradeceria tu respuesta

   Responder

6. Esta genial! era lo que estaba buscando, solo que nose si me puedas ayudar, como seria si los datos se hacen de manera dinamica, osea que esten en una base de datos MySQL, agradeceria tu respuesta

   Responder

   1. que lenguaje de servidor estas utilizando?

      Responder

      1. Gracias por responder, estoy utilizando PHP con Wamp Server

         Responder

         1. Mira te adjunto mi código: HTML

            Lugares cercanos

            //<![CDATA[
            var customIcons = {
            Banco: {
            icon: 'imagenes/bank.png'
            },
            Plazas: {
            icon: 'imagenes/departmentstore.png'
            },
            Departamentos: {
            icon: 'imagenes/apartment-3.png'
            },
            Restaurantes: {
            icon: 'imagenes/restaurant.png'
            },
            Universidad: {
            icon: 'imagenes/university.png'
            }

            };
            function load() {
            var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(25.73117, -100.31189),
            zoom: 14,
            mapTypeId: 'roadmap'
            });
            var infoWindow = new google.maps.InfoWindow;
            // Change this depending on the name of your PHP file
            downloadUrl("phpsqlajax_genxml3.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
            var nombre = markers[i].getAttribute("nombre");
            var direccion = markers[i].getAttribute("direccion");
            var tipo = markers[i].getAttribute("tipo");
            var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("latitud")),
            parseFloat(markers[i].getAttribute("longitud")));
            var html = "” + nombre + “ ” + direccion;
            var icon = customIcons[tipo] || {};
            var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            });
            bindInfoWindow(marker, map, infoWindow, html);
            }
            });
            }
            function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, ‘click’, function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
            });
            }
            function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
            new ActiveXObject(‘Microsoft.XMLHTTP’) :
            new XMLHttpRequest;
            request.onreadystatechange = function() {
            if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
            }
            };
            request.open(‘GET’, url, true);
            request.send(null);
            }
            function doNothing() {}
            //]]>

            <div id="map"

            ——————————————————————————
            PHP:

            <?php
            require("phpsqlajax_dbinfo.php");
            function parseToXML($htmlStr)
            {
            $xmlStr=str_replace('’,’>’,$xmlStr);
            $xmlStr=str_replace(‘”‘,’"’,$xmlStr);
            $xmlStr=str_replace(“‘”,’'’,$xmlStr);
            $xmlStr=str_replace(“&”,’&’,$xmlStr);
            return $xmlStr;
            }
            // Opens a connection to a MySQL server
            $connection=mysqli_connect ($db_host, $username, $password);
            if (!$connection) {
            die(‘Not connected : ‘ . mysqli_error($connection));
            }
            // Set the active MySQL database
            $db_selected = mysqli_select_db($connection, $database);
            if (!$db_selected) {
            die (‘Can’t use db : ‘ . mysqli_error($connection));
            }
            // Select all the rows in the markers table
            $query = “SELECT * FROM markers WHERE 1”;
            $result = mysqli_query($connection, $query);
            if (!$result) {
            die(‘Invalid query: ‘ . mysqli_error($connection));
            }
            header(“Content-type: text/xml; charset=utf-8_spanish_ci”);
            // Start XML file, echo parent node
            echo ”;
            // Iterate through the rows, printing XML nodes for each
            while ($row = @mysqli_fetch_assoc($result)){
            // ADD TO XML DOCUMENT NODE
            echo ”;
            }
            // End XML file
            echo ”;
            ?>

            Espero puedas ayudarme porque no encuentro como hacerlo en ninguna parte, Gracias.

            Responder

         2. Mira te adjunto mi código: HTML

            Lugares cercanos

            //<![CDATA[
            var customIcons = {
            Banco: {
            icon: 'imagenes/bank.png'
            },
            Plazas: {
            icon: 'imagenes/departmentstore.png'
            },
            Departamentos: {
            icon: 'imagenes/apartment-3.png'
            },
            Restaurantes: {
            icon: 'imagenes/restaurant.png'
            },
            Universidad: {
            icon: 'imagenes/university.png'
            }

            };
            function load() {
            var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(25.73117, -100.31189),
            zoom: 14,
            mapTypeId: 'roadmap'
            });
            var infoWindow = new google.maps.InfoWindow;
            // Change this depending on the name of your PHP file
            downloadUrl("phpsqlajax_genxml3.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
            var nombre = markers[i].getAttribute("nombre");
            var direccion = markers[i].getAttribute("direccion");
            var tipo = markers[i].getAttribute("tipo");
            var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("latitud")),
            parseFloat(markers[i].getAttribute("longitud")));
            var html = "” + nombre + “ ” + direccion;
            var icon = customIcons[tipo] || {};
            var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            });
            bindInfoWindow(marker, map, infoWindow, html);
            }
            });
            }
            function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, ‘click’, function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
            });
            }
            function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
            new ActiveXObject(‘Microsoft.XMLHTTP’) :
            new XMLHttpRequest;
            request.onreadystatechange = function() {
            if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
            }
            };
            request.open(‘GET’, url, true);
            request.send(null);
            }
            function doNothing() {}
            //]]>

            <div id="map"

            ——————————————————————————
            PHP:

            <?php
            require("phpsqlajax_dbinfo.php");
            function parseToXML($htmlStr)
            {
            $xmlStr=str_replace('’,’>’,$xmlStr);
            $xmlStr=str_replace(‘”‘,’"’,$xmlStr);
            $xmlStr=str_replace(“‘”,’'’,$xmlStr);
            $xmlStr=str_replace(“&”,’&’,$xmlStr);
            return $xmlStr;
            }
            // Opens a connection to a MySQL server
            $connection=mysqli_connect ($db_host, $username, $password);
            if (!$connection) {
            die(‘Not connected : ‘ . mysqli_error($connection));
            }
            // Set the active MySQL database
            $db_selected = mysqli_select_db($connection, $database);
            if (!$db_selected) {
            die (‘Can’t use db : ‘ . mysqli_error($connection));
            }
            // Select all the rows in the markers table
            $query = “SELECT * FROM markers WHERE 1”;
            $result = mysqli_query($connection, $query);
            if (!$result) {
            die(‘Invalid query: ‘ . mysqli_error($connection));
            }
            header(“Content-type: text/xml; charset=utf-8_spanish_ci”);
            // Start XML file, echo parent node
            echo ”;
            // Iterate through the rows, printing XML nodes for each
            while ($row = @mysqli_fetch_assoc($result)){
            // ADD TO XML DOCUMENT NODE
            echo ”;
            }
            // End XML file
            echo ”;
            ?>

            Espero puedas ayudarme porque no encuentro como hacerlo en ninguna parte, Gracias.

            Responder

            1. skype: powerhdeleon

         3. Lo que tienes que hacer es realizar la conexión a tu tabla donde tienes las ubicaciones, la unica diferencia es que los markers los deberas crear dinamicamente con codigo php, algo como lo siguiente:

            //codigo de googlemaps bla bla bla bla

            db->prepare(‘select latitud,longitud,tipo from misubicaciones’);

            $statement->execute();

            if($statement->rowCount()>0){

            $rows=$statement->fetchAll(PDO::FETCH_OBJ);

            for($i=0;$ilatitud.”, “.$rows[$i]->longitud.”);
            ”
            echo ‘TipoMarker.tipo=””;
            TipoMarker.marker = new google.maps.Marker({
            position: posicionAzul1,
            map: map,
            icon:”img/icons/”.$rows[$i]->tipo.”.png”,
            title: ‘algun texto’

            });’;
            echo “lstMarkers.push(TipoMarker);”;

            }

            }

            ?>

            Es algo como eso, el problema es imprimir dinamicamente codigo javascript.

            Responder

         4. Lo que tienes que hacer es realizar la conexión a tu tabla donde tienes las ubicaciones, la unica diferencia es que los markers los deberas crear dinamicamente con codigo php, algo como lo siguiente:

            //codigo de googlemaps bla bla bla bla

            db->prepare(‘select latitud,longitud,tipo from misubicaciones’);

            $statement->execute();

            if($statement->rowCount()>0){

            $rows=$statement->fetchAll(PDO::FETCH_OBJ);

            for($i=0;$ilatitud.”, “.$rows[$i]->longitud.”);
            ”
            echo ‘TipoMarker.tipo=””;
            TipoMarker.marker = new google.maps.Marker({
            position: posicionAzul1,
            map: map,
            icon:”img/icons/”.$rows[$i]->tipo.”.png”,
            title: ‘algun texto’

            });’;
            echo “lstMarkers.push(TipoMarker);”;

            }

            }

            ?>

            Es algo como eso, el problema es imprimir dinamicamente codigo javascript.

            Responder

      2. Gracias por responder, estoy utilizando PHP con Wamp Server

         Responder

   2. que lenguaje de servidor estas utilizando?

      Responder