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.

Adriananiny
2020-07-01
You definitely made your point! https://payday8online.com/ loan las vegas
AbermotLew
2020-07-01
как получить деньги с чужим паспортом [url=https://remont-shveynyh-mashinok.ru/pomogayut-vzyat-kredit-krasnoyarsk.html]помогают взять кредит красноярск[/url] рефинансирование кредита в народном взять телефон в рассрочку в билайн онлайн заявка оформить главфинанс займы личный кабинет вход https://remont-shveynyh-mashinok.ru/sovkombank-kredit-otzivi-klientov-2020.html где купить телефон в кредит в соликамске
AbermotLew
2020-07-01
микрозайм номер телефона с урнами нами [url=https://montazh-sistem-bezopasnosti.ru/refinansirovanie-kredita-v-sberbanke-dlya-fizicheskih-lits-usloviya-moskva.html]рефинансирование кредита в сбербанке для физических лиц условия москва[/url] кредит в сбербанке онлайн заявка на кредит на карту сбербанка держателям почтобанк со скольки лет дают кредиты онлайн заявка на кредитную карту почта банк онлайн https://montazh-sistem-bezopasnosti.ru/analiz-kreditnoy-politiki-organizatsii.html рефинансирование кредита в сбербанке для ип
RobertZeste
2020-07-01
Many thanks, A lot of knowledge! loans for bad credit guaranteed approval payday loans in nevada
Jameswhoms
2020-07-01
You actually expressed this fantastically. [url=https://payday8online.com/]the loan store[/url] money loans with bad credit
Jameswhoms
2020-07-01
Thanks. I enjoy it. [url=https://paydayloansttf.com/]bad credit car loans[/url] how do payday loans work
RobertZeste
2020-07-01
Awesome write ups. Kudos. small loans bad credit internet payday loans
DustinLak
2020-07-01
Perfectly voiced genuinely! . payday loans new payday lenders
AbermotLew
2020-07-01
займы онлайн казахстан наличными [url=https://tebepotolok.ru/houm-kredit-bank-protsentnaya-stavka-po-kreditu.html]хоум кредит банк процентная ставка по кредиту[/url] где можно занять крупную сумму денег микрозаймовые компании как подать заявку на рефинансирование в сбербанк онлайн заявка https://tebepotolok.ru/srochnie-zaymi-po-sisteme.html как проверить автомобиль перед покупкой на арест и залог бесплатно отзывы
LauraHek
2020-07-01
Здравствуйте Поддерживаю Так же хочу добавит РАБОЧИЕ ЗЕРКАЛА НА 1ХBET http://bit.ly/37SxqIa - смотрите вкладку АКЦИИ [url=https://www.youtube.com/playlist?list=PLYmlzgeKmnsf2aCEfPHjX44yavknVLbo6]Как скачать 1XBET на АЙФОН 2020? Приложение 1XBET на iphone. Промокод 1XBET!!![/url] [url=https://www.youtube.com/playlist?list=PLYmlzgeKmnsej5Lo6z9uEKh0jXY71zJUw]Как получить бесплатные деньги на 1xbet![/url] [url=https://www.youtube.com/channel/UCA-aOZWPpElYExdzaCI5fTA]Париматч зеркало последнее рабочее[/url] [url=https://www.youtube.com/playlist?list=PLYmlzgeKmnsfE23pwefBxQnEN2X5ZS5vK]https://www.youtube.com/playlist?list=PLYmlzgeKmnsfE23pwefBxQnEN2X5ZS5vK[/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 на сегодня на сегодня альтернативный адрес 2020 1xbet зеркало рабочее на сегодня 2020

Páginas