Map in Quark template

Hi there!

I'm using Quark template, restaurant variation. I'd like to show a map like in steakhouse template. Is this possible? I mean use the map in the picture in the header of contact or anywhere in Quark template.

Thanks in advance

Hi,

I don't mean to be rude but still waiting, i really need an answer for this issue. If it is not possible i'll move along but i'm stuck waiting for an answer.

Thanks again

https://www.gavick.com/forums/quark/joo ... ap#p224535

Thank you xWiz but i've already tried to paste the whole code for the steakhouse template in Quark and nothing happens (well it shows a new module but without the style, the map, and everything else). I've already worked with these templates and the editor is disabled since the beginning.

I've used this code:

Code: Select all

<div class="gk-map" data-latitude="-34.397" data-longitude="150.644" data-zoom="8" data-ui="yes"></div>
<div class="gk-over-map gkCols" data-cols="2">
<div data-scroll-reveal="enter left over .5s">
<h3>Contact Form</h3>
{GKCONTACT}
</div>
<div class="contact-form-info"  data-scroll-reveal="enter right over .5s">
<h3>Information</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis dictum elit eu placerat. Nullam vel pellentesque tortor, nec ornare enim. Phasellus lobortis dictum elit.</p>

<address>
<strong>Address</strong>
<p>Steak House<br />
South Place Street, Chicago, CH 123456<br />
Chicago 00-000, USA</p>
<a href="https://www.google.com/maps/place/Calgary,+Alberta,+Kanada/@51.013117,-114.0741555,11z/" class="gk-locate"><i class="gk-icon-map-path-solid"></i>Locate Us</a>
</address>
</div>
</div>

(Direct from the SteakHouse configuration manual)

And this is what happens...

That is the reason why i wrote this post.

I'm working in localhost i can't give access anyone at this momment but i think i'm going crazy or it's not possible to do that in this template

Some thoughts?

Sorry cant answers your qeustion.

But you can try this: http://extensions.joomla.org/extension/ ... -by-reumer

Or wait for a respons from gavick but be patient they hate bumping qeustion. Normally it takes a few days for till the first respons.

Hi

@xWiz is right. Bumping changes the date of the question in moderator tool and moves it to the end of the line.

HTML You have presented here is mostly correct. Just please change class="gk-map" to class="gkMap", Also remember to disable using editor since it can remove some of the HTML5 structures.

Next You will need a javascript:

Code: Select all

   // maps
   jQuery('.gkMap').each(function(i, map) {
      map = jQuery(map);
      map.closest('.box').css('overflow', 'hidden');
      
      var img = new jQuery('<img src="'+map.attr('data-src')+'" class="gkMap beforeload" />');
      map.after(img);
      
      var timer = setInterval(function() {
         if(img[0].complete) {
            clearInterval(timer);
            map.addClass('beforeload');
            setTimeout(function() {
               map.remove();
               img.addClass('active');
            }, 350);
         }
      }, 500);
   });


and a css:

Code: Select all

/* Map */
.gkMap {
   background: #f1f0f0 url('../images/loader.gif') no-repeat center center;
   bottom: 0;
   height: 100%;
   left: 0;
   opacity: 0.65;
   position: absolute;
   -webkit-transition: all .6s ease-out;
   -moz-transition: all .6s ease-out;
   -ms-transition: all .6s ease-out;
   -o-transition: all .6s ease-out;
   transition: all .6s ease-out;
   width: 100%;
   z-index: 0;
}
.gkMap.beforeload {
   opacity: 0;
}
.gkMap.active {
   bottom: 0;
   height: auto;
   left: 0;
   opacity: 0.65;
   position: absolute;
   width: 100%;
   z-index: 0;
}


Thank you Teitbite,

Sorry for bumping the post

Now... i'm still having some issues, maybe i did something wrong:

1. First i've changed the class from gk-map to gkMap in the code, total number of changes 2. First line and last line. The code now is:

Code: Select all

<div class="gkMap" data-latitude="-34.397" data-longitude="150.644" data-zoom="8" data-ui="yes"></div>
<div class="gk-over-map gkCols" data-cols="2">
<div data-scroll-reveal="enter left over .5s">
<h3>Contact Form</h3>
{GKCONTACT}
</div>
<div class="contact-form-info"  data-scroll-reveal="enter right over .5s">
<h3>Information</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis dictum elit eu placerat. Nullam vel pellentesque tortor, nec ornare enim. Phasellus lobortis dictum elit.</p>

<address>
<strong>Address</strong>
<p>Steak House<br />
South Place Street, Chicago, CH 123456<br />
Chicago 00-000, USA</p>
<a href="https://www.google.com/maps/place/Calgary,+Alberta,+Kanada/@51.013117,-114.0741555,11z/" class="gk-locate"><i class="gk-icon-map-path-solid"></i>Locate Us</a>
</address>
</div>
</div>
<div class="gkMap static" data-latitude="49.018324" data-longitude="12.071269" data-ui="yes" data-zoom="12"></div>

2. Then i created a new js in the folder gk_quark/js named gkMap.js with the code you gave me.
3. And last but not least i added the css code to override.css.

Still not working. I'm positive that i've done something wrong but i don't know what

Hi

2. You should put this code to /js/gk.scipts.js not creating a new one

This should work in theory, but I could not test it, because it's a customisation request and we do not support that, so all I can do is advice.

Oopsie! Sometimes i'm a little bit sloppy

Well, thank you for your time and effort teitbite but sadly didn't work. The console said sintax error. I'm moving forward but maybe i will try this again... i will tell you if i succeed in making this work

Hi

Please send me an access to ftp. I'll try to do it for You.