Canvas Support

The easiest way to Embed Google Map in canvas

3 replies·opened Jun 30, 2021
J
JaySmokeJun 30, 2021

From your docs, I realize that you don't have any documentation on how to simply embed a google map by just getting the embed code from the map and pasting it into your html. Instead you posted a very technical method which I find quite baffling why you would opt for that method instead?

I did however, tried to embed a google map the easiest way and what I noticed is that a div .fluid-width-video-wrapper was created and padding-top: 400px; was giving to it making the map very tall. After searching the styles.css file for it, I found nothing so I re-created it in custom.css and reassigned a padding of 0 !important; and height of 500px; and I had a working map.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3970.8758862686095!2d-0.18530028523393915!3d5.58535699595063!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdf9af4620ee00b%3A0x7c232f1b19c4023c!2sAdinkra+Heights!5e0!3m2!1sen!2sgh!4v1522148522919" width="100%" height="400" frameborder="0" style="border:0" allowfullscreen=""></iframe>

S
SemiColonWebSTAFFJun 30, 2021

Hello,

Apologies for the Inconveniences caused!

There is a minor bug with the Codes which is causing this. Consider using this code instead without the need of any Custom CSS:

<div class="no-fv">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3970.8758862686095!2d-0.18530028523393915!3d5.58535699595063!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xfdf9af4620ee00b%3A0x7c232f1b19c4023c!2sAdinkra+Heights!5e0!3m2!1sen!2sgh!4v1522148522919" width="100%" height="400" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>

This will definitely work fine. We will release an Update soon to address this.

The Google Maps embed is a very common method of including a Google Map on the Page and very similar to Youtube and Vimeo Video embeds, which is why Documentation is not included for the same. The Google Maps which we have included with Canvas is quite advanced and requires API Keys from Google. You can add Custom Markers or Style your maps or even add Custom Info-Windows. You can find different style of Google Maps across different Demos. More Demos are in works to demonstrate the API maps features.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

J
JaySmokeJul 1, 2021

Oh great. Will try that out and see. Thanks. Will also be looking forward to the update.

S
SemiColonWebSTAFFJul 1, 2021

Very Happy to Help! :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard