Usted está aquí

Alternativas para crear Mapas de Google adaptables y asíncronos en Drupal

Escrito por Ing. Maikel Maldonado del Toro, 05 de Abril, del 2017
Mapas-Google-adaptables-asíncronos-Drupal

Los mapas de Google son una buena alternativa para mostrar información importante de contacto en nuestros sitios web. Existen muchas formas de hacerlo incluyendo el uso de módulos.

 

Las principales dificultades que a mi juicio se presentan al utilizar el módulo de Drupal son:

- El Javascript de la petición a gmaps, al ser un js bloquea la carga de la página hasta que no se cargue completamente el fichero.

- El mapa generado no es responsive.

 

Las propuestas que traigo para resolver las anteriores dificultades son:

1- Obtén las coordenadas del lugar que deseas mostrar (recomiendo para esto usar este sitio http://www.map-embed.com/)

2- Crea un bloque y pega el siguiente código, configurando los parámetros.

 

<div id="gmap_canvas" style="height:280px;width:100%;"></div>

<script>

function init_map() {

jQuery(document).ready(function() {

var myOptions = {

//para que cuando pases por arriba con el scroll ni acerque ni aleje la imagen

scrollwheel:false,

//para que no se pueda mover la posición en la que está enfocado el mapa

draggable:false,

//para eliminar algunos controles innecesarios

mapTypeControl:false,

//para establecer el nivel de acercamiento del mapa

zoom: 14,

//para establecer las coordenadas del centro de mapa (lugar que quieres resaltar)

center: new google.maps.LatLng(23.05286541241737, -82.42761864744568),

//para establecer el tipo de mapa (ROADMAP, SATELLITE, HYBRID, TERRAIN)

mapTypeId: google.maps.MapTypeId.ROADMAP

};

//crea el mapa en el elemento que tengo como id "gmap_canvas" (en este ejemplo)

map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);

//crea el marcador en el lugar que se quiere destacar

marker = new google.maps.Marker({map: map, position: new google.maps.LatLng(23.05286541241737, -82.42761864744568)});

//Ubica el texto deseado en el marcador

infowindow = new google.maps.InfoWindow({content: "<br/>Lombao Estudios<br/> La Habana, Cuba"});

//evento para abrir el cuadro de texto dando click en el marcador

google.maps.event.addListener(marker, "click", function() {

infowindow.open(map, marker);

});

//para abrir el texto al cargar

infowindow.open(map, marker);

//para lograr que sea responsive

google.maps.event.addDomListener(window, "resize", function() {

var center = map.getCenter();

google.maps.event.trigger(map, "resize");

map.setCenter(center);

});

 

});

}

google.maps.event.addDomListener(window, 'load', init_map);

</script>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&language=es&callback=init_map" async defer></script>

 

A continuación, te facilito una especie de glosario para la mejor comprensión del trabajo:

//init_map

Es el nombre de la función que se creó al inicio del script.

//con async defer

Es para lograr que la carga sea asíncrona.

En caso de que el sitio sea multilingüe poner en la url del script en lugar de 'language=es' 'language=en'

 

Con esta sencilla guía tienes la ventaja de si usas solo JavaScript y HTML se puede utilizar en el bloque con el filtro fullHTML y no PHPCode, por lo que puede ser cacheado.

 

Saludos, no vemos en el próximo blog, en el cual escribiré sobre: La alternativa de crear un bloque de Facebook adaptable y asíncrono.

AbermotLew
2020-06-29
тинькофф банк кредит наличными в москве [url=https://nikon-online.ru/poluchit-kredit-na-1-mln-rubley.html]получить кредит на 1 млн рублей[/url] авто займ север кредит сбербанк для физических лиц в 2020 калькулятор смс займы с моментальным одобрением на карту мир https://nikon-online.ru/sberbank-otzivi-klientov-po-kreditam-nalichnimi-v-2020.html выгодные кредиты в туле
Lancesmumb
2020-06-29
Whoa plenty of terrific information. https://paydayloansttf.com/ payday loans online same day
Adriananiny
2020-06-29
Great forum posts. Many thanks. https://paydayloansbbv.com/ get a personal loan
Jameswhoms
2020-06-29
Seriously all kinds of valuable tips! [url=https://paydayloansbbv.com/]borrow money[/url] paydayloans
LauraHek
2020-06-29
Салют согласен со всем И вот это тоже по теме РАБОЧИЕ ЗЕРКАЛА НА 1ХBET http://bit.ly/37SxqIa - смотрите вкладку АКЦИИ [url=https://www.youtube.com/playlist?list=PLFpaemB26QqnZEsPcOMm7nlundDEtugvc]БК Пари матч украина казино parimatch заряжен побеждать как скачать на айфон зеркало ком вход[/url] [url=https://www.youtube.com/playlist?list=PLFpaemB26QqntkoRdo3TnjxwAoTS20dF9]Пари матч украина отзывы parimatch com регистрация бонус 2020 вывод денег на карту рулетка[/url] [url=https://www.youtube.com/playlist?list=PLFpaemB26QqkOJJ3pf54zvzRwHSB5dhW-]Пари матч украина вход как зарегистрироваться в parimatch игровые автоматы лайв казино занос[/url] [url=https://www.youtube.com/playlist?list=PLBi4-cAB_CrPBstCCP8wband_QBfn2NiS]https://www.youtube.com/playlist?list=PLBi4-cAB_CrPBstCCP8wband_QBfn2NiS[/url] [url=https://www.youtube.com/playlist?list=PLBi4-cAB_CrNxAtA9kzNjXWqSQ1Be_-tU]Бесплатные бонусы 1xbet как активировать свежие промокоды на деньги при регистрации для ставки от блогеров на 6500 руб витамин нима 1хбет[/url] [url=https://www.youtube.com/playlist?list=PLBi4-cAB_CrMQb5TkJHEnsS8BZ8j5S6uq]Как работает промокод на деньги 2020 бонусы без депозита 1xbet счастливая пятница как использовать года герман правила реклама 1хбет[/url] [url=https://www.youtube.com/playlist?list=PLBi4-cAB_CrOHFBHDPQkiJUjoNfiFx4S1]Бесплатный промокод для 1xbet бонусы и подарки казакша как получить при ставке после регистрации ютуберов казахстан 2020 тенге 1хбет[/url] https://www.youtube.com/watch?v=PBaPo_0lelY 1xbet рабочее зеркало официальный сайт на сегодня приложение скачать на андроид 1xbet зеркало на сегодня прямо сейчас 2020
RobertZeste
2020-06-29
Incredible plenty of terrific knowledge. https://payday8online.com/ quick cash loans
AbermotLew
2020-06-29
реальная помощь в получении кредита москва [url=https://major18.ru/propustil-platezh-po-kreditu.html]пропустил платеж по кредиту[/url] микрозаймы адреса в москве оформить займ онлайн наличными оформить карту голд сбербанка https://major18.ru/zapolnenie-zayavki-na-kredit-v-sberbanke.html как зарегистрироваться в кредит европа
Lancesmumb
2020-06-29
With thanks. Good information! personal loan rates same day loans online
Lancesmumb
2020-06-29
Superb info, Cheers! overnight loans clear cash loans
Adriananiny
2020-06-29
Kudos! I value this! https://payday8online.com/ personal loans with bad credit

Páginas