100% width Google Map


#1

How could I make 100% width Google Map inside custom HTML?
Main problem is that p-positioned-content class is limiting page width.

Thanks in advance!
Elvis


#2

I found something, but it’s not working in safari and older browsers.

#lp-code-249 {
left: calc(-50vw + 50%) !important;
width: 100vw !important
}


#3

Hey Elvis - Just to confirm did you want the map to be the entire background of your page? Or just span the exact size of the ‘Custom HTML’ box?

If it’s the latter then you can do so by just setting the ‘width’ and ‘height’ property in the embed code to ‘100%’

Hope that was what you were looking for!


#4

Hi Johnny, I need entire background width.

I have embed code on 100% width and I have also override some of the css with 100% width and it is not working because “#lp-pom-root .lp-positioned-content” div is limiting the page. If I make “#lp-pom-root .lp-positioned-content” div 100% width it break the whole site.

I assume we need some jquery trick or something.

Thank you in advance.


#5

Hey Elvis

Try this:

<style>
 /**
  * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
  * TS:0002-13-015
 */
 #lp-code-38 {
   width:100% !important;
   height:100% !important;
   top:0px !important;
   left:0px !important; 
   position: fixed !important; 
 } 
</style>

Replace #lp-code-38 with your custom HTML boxes ID

This will stretch the map to the entire width and height of the page. Was that more inline with what you were looking for?


#6

Hi Johnny,

Thank you for your help but this is not what i’m looking for.
Here is website: http://unbouncepages.com/artevent/
I want expand google map on 100% width only.


#7

It is working!

This is greate pice of code for Unbounce Templates.

Thank you very much for your time Johnny!

Best regards,
Elvis


#8

Glad to help Elvis :slight_smile:


#9

Hey Johnny, 

I’m trying to do the same thing, but am having issues getting around the template’s set page properties width. 

The div is viewing the HTML snippet as “content” which is defaulted to stay within the boundaries of the page properties set width. 

Is there a way for the HTML snippet to override the set width so that is has a percentage based width? 

Apologies if that is unclear. 

Thanks!
-Matt


#10

Hey Matt! 
We might need to take a look into your page a little deeper to get a better understanding on why it’s not working. Could you link it here? If not, let me know and I’ll have my support team reach out to you directly. 


#11

Hi everyone ! 

I need please install map but without scrolling zoom on:

http://cuanticcuanticoweb.it/studio-dentistico-panzanera

I found here in this page a part of code: 

http://stackoverflow.com/questions/29146888/disable-scrolling-zoom-in-google-maps-iframe

but I can’t do it both   :( 

Please help me !

  
  /*
  *  These are custom CSS styles for this template
  *  If you have any issues with customizing, 
  *  Please contact support
  *  Email: support(at)surjithctly.in
  *
  */

  
  /*Hide Map Help Text */
  
  #lp-pom-text-147 {
    display:none; 
  }
  

#12

grazie .:frowning:


#13

Hi Grazie!
Since this isn’t our script I’m not sure exactly how we can modify it to do exactly that, but if you get in contact with the template creator he should be able to give you some pointers. He’s a really friendly guy!
support@surjithctly.in


#14

Hi JUSTIN ! Take it easy… ? I am resolved problem thanks.  See it here: 

http://cuanticoweb.it/studio-dentistico-panzanera/

Scrolling zoom doesn’t’ exist ! Cool ! :wink:


#15

Whoa, Aurelio! This looks really great! :) 

I have a quick question about the neat loading animation. Is this just for effect? How have you found this has affected your conversion rates (if at all)?


#16

you speak of animations of services? servizi?

you say this hover effects?

http://codecanyon.net/item/solid-css3-image-hover-effects/12642704

for the moment I’m not selling just building sites…

I wish I had conversions !!! :wink: grazie. Thanks 


#17

Hey Elvis - Give this a try:

Drop the following into your javascript box:

$( "#lp-pom-block-39 .lp-pom-block-content" ).css('width','100%').append('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2602.5437478600206!2d-123.115227!3d49.285042000000026!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5486718276025337%3A0x9e0b0fbb24f756af!2sUnbounce!5e0!3m2!1sen!2sca!4v1416345455256" width="100%" height="100%" frameborder="0" style="border:0"></iframe>');
<br /> </script>```   
 
Replace #lp-pom-block-39 with your section ID and the \< iframe \> code with your own map embed code.   
 
I think that should do it. It's quite a bit of a workaround so I can't guarantee it will be perfect but hopefully it works for what you were looking for.   
 
If you don't want the height to expand the entire page section height, just adjust the 'height' property to a number of pixels (ex: '300px')

#18

Hey Johnny, I tried to use your last script from ‘Nov’14’ to expand a video embedded in ‘custom HTML’ example

<script> <br />
$( "#lp-pom-block-XX .lp-pom-block-content" ).css('width','100%').append('<script src="//fast.wistia.com/embed/medias/xxxxxxxx" async></script><script src="//fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:200px;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_n7s94puivi videoFoam=true" style="height:200px;width:100%">&nbsp;</div></div></div>');
<br /> </script>    indent preformatted text by 4 spaces/script>

It worked and get expanded to 100% width but not in the provided #lp-pom-block-XX. It gets shifted at the bottom of the page and #lp-pom-block-XX is just empty.

I dont have any knowledge about coding.

Can you please help me to sort it out?

Thanks
Jai


#19

Hey there! Sorry, not sure If I understand this correctly - are you trying to get a full-width video as a section? I’ll be glad to help with some clarity :slight_smile:


#20

Yes, you get it right.

I want to create something like the mobile page in this screenshot.


The section with the word ‘TA -KU’ is a video. It has full page width and looks awesome.

thanks