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.

Viagra australia
2020-06-30
Liuiky ntjszd online payday loan payday loans bad credit
RobertZeste
2020-06-30
Nicely put. Many thanks. short term loans for bad credit online payday
LauraHek
2020-06-30
Hi согласен со всем И вот это тоже по теме РАБОЧИЕ ЗЕРКАЛА НА 1ХBET http://bit.ly/37SxqIa - смотрите вкладку АКЦИИ [url=https://www.youtube.com/playlist?list=PL27hTzEp7JSsurW_g5c3vRYTwNLmggBDS]Как скачать 1 икс бет точка ком БОНУС И ПРОМОКОД на депозит на айос рабочее демос 1xbet ru зеркало рабочее на сегодня рулетка скачать приложение ios[/url] [url=https://www.youtube.com/playlist?list=PL27hTzEp7JSu6hCD27CZUI0uoS9kdQ56H]БОНУС И ПРОМОКОД на депозит 1хбет рабочее зеркало для яндекс браузера сегодня регистрация в один клик Как скачать взломанный 1 икс бет[/url] [url=https://www.youtube.com/playlist?list=PL27hTzEp7JSugpsJOZoKT-BiJkWKCw7aN]Как поднять бабла на 1 икс бет БОНУС И ПРОМОКОД на депозит альтернативная ссылка 1хбет рабочее зеркало сегодня 21 очко играть без цуписа[/url] [url=https://www.youtube.com/playlist?list=PL27hTzEp7JSumnnWavM68VliaAnNP395u]БОНУС И ПРОМОКОД Как зайти в 1xbet через зеркало зеркало рабочее на сегодня 1xzerkalo 1 икс бет версия 2020 года скачать bookmakersbet[/url] [url=https://www.youtube.com/playlist?list=PL27hTzEp7JStN0RWqOj0TKxhsscK7aX1B]БОНУС И ПРОМОКОД 1xbet com sport рабочее зеркало на сегодня бесплатный промокод для 1 икс бет казино bet rate com букмекер контора[/url] [url=https://www.youtube.com/playlist?list=PL27hTzEp7JSt6NLSc-BVQCf83tZ9SUa4K]Зеркало сайта 1xbet ru БОНУС И ПРОМОКОД букмекерская контора минимальная ставка на 1 икс бет ставки на спорт открыть демо счет[/url] [url=https://www.youtube.com/playlist?list=PL27hTzEp7JSt9fxF8sT9EqxniIlYmqhcA]Как скачать программу 1 икс бет на андроид альтернативное зеркало 1хбет работающее на сегодня ставки на спорт БОНУС И ПРОМОКОД[/url] https://www.youtube.com/playlist?list=PLBi4-cAB_CrPBstCCP8wband_QBfn2NiS https://www.youtube.com/playlist?list=PLBi4-cAB_CrOAdhw798xZjKFeuU8htWyE https://www.youtube.com/playlist?list=PLBi4-cAB_CrNuCYMovApoadndbJ4rqLim https://www.youtube.com/playlist?list=PLBi4-cAB_CrPb3g1cGoJGfneXpxzKSKqQ рабочее зеркало 1xbet на сегодня прямо сейчас как скачать 1хбет на пк 2020 год 1xbet зеркало рабочее на сегодня 2020
AbermotLew
2020-06-30
как взять в борг деньги на лайф [url=https://mototehnika76.ru/kredita-protsentnoy-stavki-trebovaniya.html]кредита процентной ставки требования[/url] триколор оплата с банковской карты сбербанка пакет единый ипотечный кредит от застройщика автомобили в кредит в автосалонах краснодара https://mototehnika76.ru/zaymi-bez-otkaza-s-plohoy-kreditnoy-istoriey-na-kartu-srochno.html хоум кредит самара официальный сайт
Lancesmumb
2020-06-30
Amazing data. Regards. https://paydayloansbbv.com/ first cash advance
Adriananiny
2020-06-30
Nicely put, With thanks. https://payday8online.com/ express payday
Adriananiny
2020-06-30
You actually said that fantastically. https://payday8online.com/ quick payday loans
AbermotLew
2020-06-30
быстрые займы наличными на карту [url=https://mdragon05.ru/kak-vzyat-kredit-v-19-let.html]как взять кредит в 19 лет[/url] кредит без отказа при наличии что такое код октмо по месту жительства в декларации где занять деньги без обмана на карту https://mdragon05.ru/kak-uznat-na-kogo-oformlen-telefon-bilayn.html кредит онлайн 24 7 на карту
Lancesmumb
2020-06-30
Good write ups. Cheers! payday loans loans online with monthly payments
RobertZeste
2020-06-30
Excellent postings. Many thanks! debt consolidation loans bad credit loans not payday loans

Páginas