Cómo cargar Google Maps de forma diferida

Después de publicar artículos sobre la carga diferida de videos de YouTube, imágenes de carga diferida, comentarios disqus de carga diferida y anuncios de AdSense de carga diferida, tengo otro tutorial o artículo para usted en el que le diré cómo puede cargar mapas de Google en su sitio web.Voy a llamar a esta semana de optimización de sitios porque en esta semana he publicado todos los artículos sobre optimización de sitios web.

¿Para quién es este artículo?

Este artículo no es para editores o escritores de contenido. Estoy publicando este artículo solo para aquellas personas que tienen sitios web comerciales y desean proporcionar la ubicación de su negocio utilizando los mapas de Google.

Mapas de Google tiene una funcionalidad integrada para incrustar mapas y si utiliza el código de incrustación proporcionado por Google Maps para incrustar el mapa en su sitio web, verá que la velocidad de su sitio web se vuelve más lenta y aumenta el tiempo de carga de su sitio web.

Si su sitio web tiene un tiempo de carga muy alto, entonces su sitio no se clasificará en Google porque Google sirve páginas que tienen un tiempo de carga bajo.

Pero si tiene mapas de Google incrustados en su sitio web o si quiere incrustar mapas de Google en su sitio web, tengo una truco de optimización de sitios web para ti y ese hack es carga lenta mapas de Google.

Beneficios de la carga diferida de mapas de Google:

La carga diferida de Google Maps le brinda muchos beneficios, como que no afectará el tiempo de su sitio web, ya que a veces los mapas de Google hacen que su sitio web cargue lento y aumente el tiempo de carga de su sitio web y también elimina demasiadas solicitudes si el usuario no quiere ver los mapas en tu sitio web.

¿Cómo funciona?

El funcionamiento de esta carga perezosa plugin para los mapas de Google es lo mismo que la carga diferida de anuncios de AdSense o comentarios disqus de carga diferida y es que sus mapas de Google no se cargarán en el evento de carga de la página, solo se cargarán cuando estén en el mirador o si el usuario acaba de desplazarse al elemento donde se implementan sus mapas de Google en su sitio. Este complemento también recarga los mapas de Google cada vez que cambia el tamaño de la ventana del navegador o la orientación de su dispositivo.

Los mapas de Google no se cargan en el momento de carga de la página usando este simple plugin lo que significa que su sitio web no se verá afectado, generalmente es tiempo de carga.

Manifestación:

Entonces, antes que nada, permítame mostrarle la demostración de este complemento y luego veremos cómo podemos implementar esta técnica de carga diferida para nuestros mapas de Google en el sitio web de nuestro sitio web.

Has visto la demostración, se ve bastante bien y ahora veamos cómo podemos implementar esto. plugin simplemente agregando una pequeña pieza de código en nuestro sitio web.

Este pequeño fragmento de código está disponible en versión jQuery puede tomar los archivos de los enlaces a continuación.

Inicialización de mapas de Google de carga diferida plugin:

Aquí se trata de la inicialización de este complemento. Para inicializar este complemento, debe usar el código que se proporciona a continuación.

$(selector).lazyLoadGoogleMaps([options]);

Así que nuestro nombre de función global es lazyLoadGoogleMaps.

El selector será el selector del elemento de Google Maps.

Opciones o configuraciones compatibles:

Estas son algunas opciones o configuraciones admitidas para este complemento simple que puede modificar según sus requisitos. También se proporciona una descripción para su comodidad.

$(selector).lazyLoadGoogleMaps(
{
    key: false,
    // just an API key if you have one
 
    libraries: false,
    // libraries to load, i.e. 'geometry,places'
 
    signed_in: false,
    // sign-in on a map enabled/disabled
 
    language: false,
    // set language, i.e. 'en', 'en-GB'
 
    region: false,
    // set region, i.e. 'GB'
 
    callback: false
    /*
        a callback function called within every map instance initiation;
        there are two variables that are passed as parameters to the function:
        function( container, map )
            * container - the container element which has a selector 'selector' (see the first line)
            * map - the map instance which is a part of Google Maps API
    */
});

Este complemento también tiene dos métodos auxiliares. ¿Le ayudó además a implementar este complemento para los mapas de Google en su sitio web?

var $instance = $(selector).lazyLoadGoogleMaps( [options] );
 
$instance.debounce( duration, fn );
 
$instance.throttle( duration, fn );

Si tiene varios mapas con diferentes ubicaciones en su página web y necesita marcarlos y centrar su vista, la forma más sencilla es usar este código usando este plugin.

 



;(function ($, window, document, undefined) {
    $('.google-map').lazyLoadGoogleMaps({
        callback: function (container, map) {
            var $container = $(container),
                center = new google.maps.LatLng($container.attr('data-lat'), $container.attr('data-lng'));
            map.setOptions({
                zoom: 15,
                center: center
            });
            new google.maps.Marker({
                position: center,
                map: map
            });
        }
    });
})(jQuery, window, document);

Atributos y descripción:

Estos son los atributos utilizados en el código anterior con su descripción proporcionada. Encontrará los valores de estos atributos en el código de inserción de Google Maps.

Pensamientos finales:

Así que aquí termina este artículo ahora que ha implementado con éxito este carga diferida de google maps en su sitio web. Ahora he compartido todos los métodos para optimizar su sitio web, por lo que ahora es su trabajo implementar estas funcionalidades en su sitio y hacer que su sitio se cargue más rápido en Google.

Si tiene algún problema con respecto a este artículo, deje sus comentarios positivos a continuación y evite el abuso.