Locate us - no overlay is shown

Hi,

I have set up a contact page, but the orange orverlay on top of the map is not shown.

Th code on the page is this:

Code: Select all

<div class="map contact-form">
<div class="gk-map" data-latitude="56.138992" data-longitude="10.215293" data-zoom="13" data-ui="yes"></div>
<div class="gk-over-map gk-cols" data-cols="2">
<div data-scroll-reveal="enter left over 1.5s">
<h3>Contact Form</h3>
[GK_Contact email="[email protected]"]

</div>
<div class="contact-form-info" data-scroll-reveal="enter right over .5s">
<h3>Information</h3>
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.

<address><strong>Adresse
</strong>Crêperiet
Marselisborg Havn
8000 Aarhus C
<a class="gk-locate" href="https://www.google.dk/maps/place/56%C2%B008'20.4%22N+10%C2%B012'55.0%22E/@56.1396321,10.2150141,15z/data=!4m2!3m1!1s0x0:0x0?hl=da"><i class="gk-icon-map-path-solid"></i>Find os
</a></address></div>
</div>
</div>

Link to page: http://yumo.dk/kontakt/

I would like to have the same effect as this: https://demo.gavick.com/wordpress/steakhouse/#location

Do I need to active something, to make this work?

Thanks in advance.

Best regards,

Thomas

Hello,

The code is created for the frontpage blocks, if you want to use it on another pages, it will be easier to use widget, please add the following code into Text widget in Bottom II widget area:

Code: Select all

<div class="bigtitle">
<h3 class="header">
<span>Location</span>
<small>Contact us right now!</small>
</h3>
</div>
                           
<div class="map contact-form">
  <div class="gk-map" data-latitude="-34.397" data-longitude="150.644" data-zoom="8" data-ui="yes"></div>
  <div class="gk-over-map gk-cols" data-cols="2">
    <div data-scroll-reveal="enter left over .5s">
      <h3>Contact Form</h3>
      [GK_Contact]
    </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>


Click "Widget Rules" button add "map" as a custom CSS class and now you can display this widget on your page using widget rules:
https://www.gavick.com/documentation/wo ... dget-rules

You can display it on more than one page.

Thanks - that did the trick