Add Google Map Virtual tour Full with

[djbram1]

Hi!

I want the Google map virutel tour in full with (like the map in the page builder) in my website.

The URL of the map: https://www.google.nl/maps/place/Bed+%26+Breakfast+Terre+Neuve/@51.9962153,5.981312,3a,75y,184.43h,90t/data=!3m6!1e1!3m4!1s4vx0zFtRWi23kAGkoGHCdg!2e0!7i13312!8i6656!4m5!3m4!1s0x0:0xec3e7fd056b40be5!8m2!3d51.9961302!4d5.9811101!6m1!1e1

On this page:

Studio’s

Thanks!

[David Martin – Support]

That is not something that is possible out the box.

You would want to work with a developer to help you integrate this.

[djbram1]

Isn’t there some code to make it full with?

[David Martin – Support]

To make the map fullwidth you use the Page Builder Row (add the map within the row) and set the width to Fullwidth (Stretched).

[djbram1]

Yes it works!

And can i don’t want to zoom in when i’m scrolling down the page, how can i fix that?

Thanks!

[David Martin – Support]

That is not something we can control, that is the Google map embed.

Have you tested adding the code to a Text Block, not a Boxed Content asset?

[djbram1]

Yes i tried, you can see it here: http://terreneuve.nl.transurl.nl/studios/

Its the same!

[David Martin – Support]

That is unfortunately not something we can control. The standard Google map within the Page Builder we can but not this custom embed.

[djbram1]

And is there no piece of code i can add to try?

Map:

<iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m0!3m2!1snl!2snl!4v1484727086982!6m8!1m7!1s4vx0zFtRWi23kAGkoGHCdg!2m2!1d51.99621534144007!2d5.981312041065735!3f184.43!4f0!5f0.7820865974627469&#8243; width=”100%” height=”400px” frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

Row:

[/spb_promo_bar] [spb_row element_name=”Row” wrap_type=”full-width-stretch” row_bg_type=”color” color_row_height=”content-height” bg_type=”cover” parallax_image_height=”content-height” parallax_image_movement=”fixed” parallax_image_speed=”standard” bg_video_loop=”yes” parallax_video_height=”window-height” row_top_style=”none” row_bottom_style=”none” parallax_video_overlay=”none” row_overlay_opacity=”0″ remove_element_spacing=”no” row_col_spacing=”0″ row_col_pos=”default” row_col_equal_heights=”no” row_expanding=”no” row_animation=”none” row_animation_delay=”0″ minimize_row=”no” simplified_controls=”yes” custom_css_percentage=”no” custom_css=”margin-top: 0px;margin-bottom: 0px;” border_styling_global=”default” width=”1/1″ el_position=”first last”] [spb_text_block animation=”none” animation_delay=”0″ simplified_controls=”yes” custom_css_percentage=”no” padding_vertical=”0″ padding_horizontal=”0″ margin_vertical=”0″ custom_css=”margin-top: 0px;margin-bottom: 0px;” border_size=”0″ border_styling_global=”default” width=”1/1″ el_position=”first last”]

[Rui Guerreiro – SUPPORT]

The problem is inside the google maps iframe. There is some css to remove any events of the iframe but you wont be able to use any mouse event inside the google maps iframe.

You can add it to the custom css option.

.page-id-10 iframe {
    pointer-events: none;
}

-Rui

[djbram1]

Thanks for the option, unfortunately this custom css doesn’t work, now i can’t use the whole map and the functions.

Is there another option witch i can try?

[Rui Guerreiro – SUPPORT]

I’m afraid not, you can always try to use our google map assets but we don’t have that Street View.

-Rui