How did you do the non-zooming full-width map in Icon Demo 10? – Themeco Community

How did you do the non-zooming full-width map in Icon Demo 10?

owenb — Tue, 30 Sep 2014 17:51:11 +0000

Hi,

I’m trying to recreate the map element you have on the homepage for Icon Demo 10. It doesn’t zoom in and out when you mouse over and use the scroll wheel, and I can’t work out how you’ve done that.

I’ve looked at the demo files and although I can’t make the map work on my site (I don’t understand what the demo installation instructions mean by ‘If you plan on using Visual Composer, use the markup from the Visual Composer column’ because in TextEdit for Mac there are no columns shown in the file) I can’t see anything that locks the scroll, just a class (fullwidth man?) and I don’t recognise it.

Many thanks in advance!
Owen

Reply To: How did you do the non-zooming full-width map in Icon Demo 10?

Zeshan — Tue, 30 Sep 2014 18:57:33 +0000

Hi Owen,

Thank you for writing in!

To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Meanwhile, the map element iframe code can be found at the bottom of the demo content file. The code is:

[map class="fullwidth man" no_container="true"][/map]

Thanks!

Reply To: How did you do the non-zooming full-width map in Icon Demo 10?

owenb — Wed, 01 Oct 2014 08:16:34 +0000

Hello,

I am using an empty test site at http://owenbillcliffe.co.uk/wpobp6/. As my enquiry was about the demo I didn’t think it would be useful, sorry!

I already found the code for the map on the demo, but I don’t understand how to use it. The code as contained in the demo file doesn’t work in Visual Composer and the instructions for using it in VC don’t make sense to me but that’s just because I’m totally new to X as of yesterday 😉 It says use the Visual Composer column to make that code work in VC. Does that mean I have to wrap the code in ‘vc row’ codes and paste into the Classic Editor? Not tried it yet…

Really, what I’m after is how you’ve disabled scroll-wheel zooming on the map of Icon demo 10. Every time I’ve tried to implement a map I get the issue that if someone scrolls the screen when they get to the map the map zooms. On that demo even if you leave the cursor over the map and roll the wheel the map never zooms. How’s that done? I’d love to recreate it!

Thanks!
Owen

Reply To: How did you do the non-zooming full-width map in Icon Demo 10?

Paul R — Wed, 01 Oct 2014 11:29:34 +0000

Hi Owen,

If you want to use visual composer, you need to get the code from the visual composer type demo content.

http://screencast.com/t/6qNDzSSercf

Try copying and pasting the code below into your page in classic mode and text editor.


[vc_row class="center-text" padding_top="0" padding_bottom="0" no_margin="true" border="none" bg_color="#fff"]
  [vc_column width="1/1"]
    [map class="fullwidth man" no_container="true"][/map]
  [/vc_column]
[/vc_row]

For scrolling try to add scrolling=”no” in your iframe code like the code above.

Hope this helps.