Cómo agregar varias tiendas en Google Maps en WordPress sin usar plugins

9 de octubre de 2024

Si tienes un negocio con varias ubicaciones y deseas mostrarlas en un mapa de Google en tu página web de WordPress, hoy te enseñaré cómo hacerlo sin necesidad de utilizar plugins ni gastar dinero. Este tutorial es perfecto para quienes buscan una solución gratuita y sencilla para integrar múltiples puntos en un mapa de Google.

Paso 1: Activar la API de Google Maps

Antes de iniciar con el código personalizado, necesitamos habilitar la API de Google Maps en nuestra cuenta de Google. Para esto, debes acceder a Google Cloud Console utilizando tu cuenta de Gmail. Aquí, sigue estos pasos:

Inicia sesión y dirígete a la opción Crear nuevo proyecto.
Asigna un nombre al proyecto (por ejemplo, “API Maps”).
Ve a APIs y servicios > Biblioteca y busca Maps JavaScript API.
Habilita la API y asocia un método de pago. Google te ofrece $200 de crédito mensual, suficientes para manejar hasta 28,500 solicitudes de mapa sin costo adicional.

Paso 2: Obtener la clave API

Una vez habilitada la API, Google generará una clave API que usarás para integrar el mapa en tu página de WordPress. Es importante proteger esta clave, limitando su uso a tu dominio web para evitar usos no autorizados.

Paso 3: Insertar el código en WordPress

Para integrar el mapa en tu sitio, utilizarás un código personalizado que incluirá la información de tus tiendas, como latitud, longitud, nombre y detalles de contacto. Sigue estos pasos:

Accede a tu cPanel y busca el archivo functions.php de tu tema hijo. Si no tienes un tema hijo, te recomiendo crearlo para evitar perder modificaciones al actualizar el tema principal.
Copia y pega el código personalizado en el archivo functions.php. Este código te permitirá generar un shortcode que luego podrás usar en cualquier página o publicación para mostrar el mapa. Aquí te dejo el código

<?php
/*
Plugin Name: Google Maps Plugin (Manual Calibration)
Description: Agrega un mapa de Google a tu sitio web con marcadores personalizados que puedes arrastrar y calibrar manualmente.
Version: 2.4
*/

function google_maps_plugin_shortcode($atts) {
    // Información predeterminada si no se proporciona en el shortcode
    $default_markers = [
        [
            'position' => [‘lat’ => 6.2422516414768, ‘lng’ => -75.57471267909851], // Coordenadas del marcador exactas
            ‘title’ => ‘Colegio Juan XXIII’, // Título del marcador
            ‘icon’ => [
                ‘url’ => ‘http://localhost/divi/wp-content/uploads/2024/10/punto_gif_market_2.gif’, // URL del ícono
                ‘size’ => [100, 100]  // Tamaño del ícono ajustado
            ],
            ‘info’ => [
                ‘direccion’ => ‘Calle 123, San Cristóbal’, // Dirección de la tienda
                ‘telefono’ => ‘5555555555’, // WhatsApp para esta tienda
                ‘horarios’ => ‘Lunes a Viernes: 8am-5pm’, // Horarios de atención
                ‘como_llegar’ => ‘7.886442,-72.5094859’ // Coordenadas para “Cómo llegar”
            ]
        ],
        [
            ‘position’ => [‘lat’ => 7.884210247898742, ‘lng’ => -72.51088064868773], // Coordenadas del marcador exactas
            ‘title’ => ‘Market 2’, // Título del marcador
            ‘icon’ => [
                ‘url’ => ‘http://localhost/divi/wp-content/uploads/2024/10/punto_gif_market_1.gif’, // URL del ícono
                ‘size’ => [100, 100]  // Tamaño del ícono ajustado
            ],
            ‘info’ => [
                ‘direccion’ => ‘Calle 123, San Cristóbal’, // Dirección de la tienda
                ‘telefono’ => ‘5555555555’, // WhatsApp para esta tienda
                ‘horarios’ => ‘Lunes a Viernes: 8am-5pm’, // Horarios de atención
                ‘como_llegar’ => ‘7.886442,-72.5094859’ // Coordenadas para “Cómo llegar”
            ]
        ],
        [
            ‘position’ => [‘lat’ => 7.884210247898742, ‘lng’ => -72.51088064868773], // Coordenadas del marcador exactas
            ‘title’ => ‘Market 2’, // Título del marcador
            ‘icon’ => [
                ‘url’ => ‘http://localhost/divi/wp-content/uploads/2024/10/punto_gif_market_1.gif’, // URL del ícono
                ‘size’ => [100, 100]  // Tamaño del ícono ajustado
            ],
            ‘info’ => [
                ‘direccion’ => ‘Calle 123, San Cristóbal’, // Dirección de la tienda
                ‘telefono’ => ‘5555555555’, // WhatsApp para esta tienda
                ‘horarios’ => ‘Lunes a Viernes: 8am-5pm’, // Horarios de atención
                ‘como_llegar’ => ‘7.886442,-72.5094859’ // Coordenadas para “Cómo llegar”
            ]
        ]

];

// Parámetros por defecto (shortcode)
    $atts = shortcode_atts(
        array(
            ‘markers’ => json_encode($default_markers),  // Marcadores en formato JSON o usa los predeterminados
        ),
        $atts,
        ‘google_maps’
    );

// Decodificar los marcadores proporcionados en el shortcode
    $markers = json_decode($atts[‘markers’], true);

// API Key para Google Maps (sustituir por tu propia API Key)
    $api_key = ‘COLOCA_AQUI_TU_API_KEY’;

ob_start(); // Iniciar el buffer para capturar la salida
    ?>
    <div id="map" style="height: 600px; width: 100%;"></div>

<div id="coordinates" style="display: <?php echo current_user_can('administrator') || is_user_logged_in() ? 'block' : 'none'; ?>; margin: 50px;”>
        <p style="font-weight: bold;">Coordenadas del marcador:</p>
        <div style="display: flex; gap: 10px;">
            <div style="position: relative;">
                <div id="latitudeMessage" style="position: absolute; top: -25px; left: 0; background-color: #4caf50; color: white; padding: 5px; border-radius: 4px; display: none;">
                    Copiado
                </div>
                <label for="latitude" style="font-weight: bold;">Latitud:</label>
                <input type="text" id="latitude" readonly style="width: 200px; padding: 5px; border: 1px solid #ccc; border-radius: 4px;" onclick="copyToClipboard('latitude', 'latitudeMessage')" />
            </div>
            <div style="position: relative;">
                <div id="longitudeMessage" style="position: absolute; top: -25px; left: 0; background-color: #4caf50; color: white; padding: 5px; border-radius: 4px; display: none;">
                    Copiado
                </div>
                <label for="longitude" style="font-weight: bold;">Longitud:</label>
                <input type="text" id="longitude" readonly style="width: 200px; padding: 5px; border: 1px solid #ccc; border-radius: 4px;" onclick="copyToClipboard('longitude', 'longitudeMessage')" />
            </div>
        </div>
    </div> <script src="https://maps.googleapis.com/maps/api/js?key=<?php echo $api_key; ? type="litespeed/javascript">"></script> <script type="text/javascript">function initMap() {
            // Configuración del mapa
            const mapCenter = {
                lat: 6.2374474, // Latitud por defecto (puedes cambiarla)
                lng: -75.5767565 // Longitud por defecto (puedes cambiarla)
            };

const map = new google.maps.Map(document.getElementById('map'), {
                center: mapCenter,
                zoom: 15, // Nivel de zoom del mapa
            });

// Marcadores desde el shortcode o el código
            const markers = <?php echo json_encode($markers); ?>;

const isAdmin = <?php echo json_encode(current_user_can('administrator') || is_user_logged_in()); ?>; // Verifica si el usuario es administrador o está logueado

markers.forEach((markerData) => {
                const markerIcon = {
                    url: markerData.icon.url, // URL del ícono del marcador
                    scaledSize: new google.maps.Size(markerData.icon.size[0], markerData.icon.size[1]) // Tamaño del ícono ajustado
                };

const marker = new google.maps.Marker({
                    position: markerData.position, // Coordenadas del marcador
                    map: map,
                    title: markerData.title, // Título del marcador
                    icon: markerIcon, // Ícono del marcador
                    draggable: isAdmin // Hacer el marcador arrastrable solo si es administrador
                });

// Mostrar ventana de información al hacer clic en el marcador
                marker.addListener('click', () => {
                    infowindow.open(map, marker);
                });

// Actualizar las coordenadas al arrastrar el marcador solo si es administrador
                if (isAdmin) {
                    marker.addListener('dragend', (event) => {
                        const newLat = event.latLng.lat();
                        const newLng = event.latLng.lng();
                        const latitudeInput = document.getElementById('latitude');
                        const longitudeInput = document.getElementById('longitude');

latitudeInput.value = newLat; // Actualizar el campo de latitud
                        longitudeInput.value = newLng; // Actualizar el campo de longitud

// Mensaje para indicar que las coordenadas han cambiado
                        showMessage(Nuevo punto de ubicación:\nLatitud: ${newLat}\nLongitud: ${newLng});
                    });
                }
            });
        }

function copyToClipboard(id, messageId) {
            const input = document.getElementById(id);
            input.select();
            document.execCommand('copy'); // Copiar el contenido al portapapeles
            showMessage(messageId); // Mostrar mensaje emergente
        }

function showMessage(messageId) {
            const messageDiv = document.getElementById(messageId);
            messageDiv.style.display = 'block'; // Mostrar el mensaje

setTimeout(() => {
                messageDiv.style.display = 'none'; // Ocultar el mensaje después de 2 segundos
            }, 2000);
        }

window.onload = initMap; // Inicializar el mapa al cargar la página</script> <?php
    return ob_get_clean(); // Retornar el contenido generado
}

add_shortcode('google_maps', 'google_maps_plugin_shortcode'); // Registrar el shortcode

Puedes agregar tantas tiendas como necesites siguiendo este formato.

Paso 4: Personalizar el mapa

Dentro del código que insertaste en functions.php, hay una sección dedicada a personalizar el mapa. Aquí puedes definir:

Puntos de tienda: Añade más tiendas copiando y pegando el formato de latitud, longitud, nombre y detalles.
Icono del marcador: Personaliza el icono que señala cada tienda en el mapa.
Nivel de zoom: Ajusta el nivel de zoom del mapa para mostrar más de cerca o más alejado.

Paso 5: Mostrar el mapa en tu sitio

Una vez configurado todo en functions.php, solo necesitas utilizar un shortcode para mostrar el mapa en cualquier página o publicación de tu sitio web. Inserta el siguiente shortcode en el editor de WordPress:

Este shortcode generará el mapa interactivo con todas tus tiendas.

Bonus: Integrar WhatsApp en el mapa

Además de mostrar la ubicación de las tiendas, puedes hacer que al hacer clic en el número de teléfono de una tienda, se abra automáticamente una conversación en WhatsApp. Solo necesitas asegurarte de que el número incluya el código internacional y esté correctamente formateado.

Consideraciones finales

Este método es ideal para quienes buscan una solución gratuita y flexible para mostrar varias tiendas en un mapa de Google. Aunque implica trabajar con algo de código, es una alternativa excelente para evitar la instalación de plugins adicionales que puedan afectar el rendimiento de tu sitio.

Si no tienes experiencia con código o buscas una solución más sencilla, también te recomiendo Advanced Google Maps Plugin. Es una herramienta premium que permite personalizar mapas de manera intuitiva sin escribir una sola línea de código.

Espero que este tutorial te haya sido útil. Si tienes alguna duda o sugerencia, déjala en los comentarios, y si te gustaría aprender más sobre cómo organizar tu código en WordPress, házmelo saber para crear un tutorial al respecto.

Conclusión: Agregar múltiples tiendas en un mapa de Google dentro de WordPress no tiene por qué ser complicado ni costoso. Siguiendo estos pasos, puedes lograrlo sin gastar dinero en plugins y con la flexibilidad de personalizarlo a tu gusto.

Si quieres más tutoriales como este, ¡suscríbete a mi canal de YouTube y activa las notificaciones para no perderte los próximos videos!

Apoya el canal y ayuda a que este contenido siga creciendo.

0 comentarios

Enviar un comentario Cancelar la respuesta

Cargando canal ....

Todas las semanas subimos nuevo video

Regístrate gratuitamente y accede a todo el contenido

AB