Copying the Real-estate demo, issues with google maps and width:100%

15 replies · opened Feb 23, 2017

SStuAndrewsFeb 23, 2017

Hi Folks,

Love the real-estate demo! Is great.

So. Am trying to mimic the three segment "map / about us / contact us" part of the real-estate demo.

Here's the issue.

When I set the map id to be "google-map", the map appears at 100% width (disregarding the col-md-5 width, because the style.css google-map setting of width:100% overrides that).

When I set the map id to be something like "offices-map", the three columns are setting correctly BUT the map only shows a little of the actual map and then empty grey space otherwise (pic attached).

For the moment I've used "google-map" and then hard-coded the width to be 41.66666667% (as per the col-md-5 css).

Any clues as to what might be happening here?

SStuAndrewsFeb 23, 2017

Actually, now that I'm looking for it, the partial-grey area is there all the time. Regardless of whether I use "google-map" or not.

It's more noticable when not using "google-map", but it's still there when you do.

SStuAndrewsFeb 23, 2017

Okay, got it.

If you remove the "common-height" class from the surrounding div, it fixes the issue with google maps.

But then, obviously, the three side-by-side divs are their own height.

SSemicolon WebSTAFFFeb 23, 2017

Hello,

Thank You so much for the Kind Words and Apologies about the Inconveniences caused!

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

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

SStuAndrewsFeb 23, 2017

This is the url, http://www.sandersnoonan.com.au/sayhello.

It doesn't have the "common-height" class, but you should be able to add that in via dev tools in whatever browser you're using I imagine.

SSemicolon WebSTAFFMar 29, 2017

Hello,

We Really Apologize about the Delays you have experienced and we really really value your Patience with us!

We have checked out your Page and we request you to please add the .common-height Class since it runs on Javascript Functions and adding this Class from the Inspect Element will not make it work properly. So it is recommended for you to please add this Class and get back to us so that we can look into this again.

Additionally, we noticed that there is a Javascript Syntax Error on your Page with Quotes on properly escaped. Please find the following code:

html: 'Welcome to our Oatley office!
18 Oatley Ave, Oatley, NSW, Australia

[Anna Stratikopoulos](http://sandersnoonan.com.au/team-member?1=Pk5Vemjbp7DQ51GZlQ3F) and [Trish Pieper](http://sandersnoonan.com.au/team-member?1=Sx3R6oH9hNUK6yVaBypq) and [Monica Ren](http://sandersnoonan.com.au/team-member?1=sMYGBwLDzO3fd0taVhFo) and [Ben Lamond](http://sandersnoonan.com.au/team-member?1=3mMijKVSZM9I33Iotygn) and [Linda Saysanith](http://sandersnoonan.com.au/team-member?1=eq6EVFfhi6pU2hrX08dr) and [Manson Chan](http://sandersnoonan.com.au/team-member?1=SG49J84MOPDE1L5DGE6C) and [Benjamin Rogers](http://sandersnoonan.com.au/team-member?1=VOYNOXWXAKNQTFQAWI6O) and [Taelah Farrell-Martin](http://sandersnoonan.com.au/team-member?1=1QCWPFLRVBA723XG8B2M) and [Jay Laga'aia](http://sandersnoonan.com.au/team-member?1=X6MR86W9EOT4MORRIJ8Y) and [Ilija Stojanov](http://sandersnoonan.com.au/team-member?1=8RTC7X0YQPOVTT697SM4) live here.
',

and replace it with:

html: 'Welcome to our Oatley office!
18 Oatley Ave, Oatley, NSW, Australia

[Anna Stratikopoulos](http://sandersnoonan.com.au/team-member?1=Pk5Vemjbp7DQ51GZlQ3F) and [Trish Pieper](http://sandersnoonan.com.au/team-member?1=Sx3R6oH9hNUK6yVaBypq) and [Monica Ren](http://sandersnoonan.com.au/team-member?1=sMYGBwLDzO3fd0taVhFo) and [Ben Lamond](http://sandersnoonan.com.au/team-member?1=3mMijKVSZM9I33Iotygn) and [Linda Saysanith](http://sandersnoonan.com.au/team-member?1=eq6EVFfhi6pU2hrX08dr) and [Manson Chan](http://sandersnoonan.com.au/team-member?1=SG49J84MOPDE1L5DGE6C) and [Benjamin Rogers](http://sandersnoonan.com.au/team-member?1=VOYNOXWXAKNQTFQAWI6O) and [Taelah Farrell-Martin](http://sandersnoonan.com.au/team-member?1=1QCWPFLRVBA723XG8B2M) and [Jay Laga\'aia](http://sandersnoonan.com.au/team-member?1=X6MR86W9EOT4MORRIJ8Y) and [Ilija Stojanov](http://sandersnoonan.com.au/team-member?1=8RTC7X0YQPOVTT697SM4) live here.
',

This will fix the issue with the Syntax Error. Hope this Helps!

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

SStuAndrewsMar 30, 2017

The url is updated to include the "common-height" class.

The problem is, this is a live site, and while the map is missing it hurts us (having a site not working the way it should, and very visible to the visitor).

Please get back to me soon about it, that would be great.

SStuAndrewsMar 30, 2017

SStuAndrewsApr 4, 2017

Hi Folks,

While I've got this class in the page looks terrible. Can you please have a look at this and get back to me soon. I need to either change the code back to having it "sort of" work, or fix it with whatever fix you come up with.

Thanks.

SStuAndrewsApr 4, 2017

Hi Folks,

[sb_private_reply]Five days with our website page not working properly and counting.

I'm sweating on this. I'm going to have to change it back soon if you aren't able to look at it within the next couple of days.

[/sb_private_reply]Thanks.

SSemicolon WebSTAFFApr 5, 2017

Hello,

[sb_private_reply]Once again we apologize about the delays![/sb_private_reply]

We have been checking your Page and the Immediate Issue is because of the Custom JS Codes you have added for the Google Maps, the immediate issue appears with the following code:

Welcome to our Lugarno office!
1012 Forest Road, Lugarno, NSW, Australia

[Judy Mason](http://sandersnoonan.com.au/team-member?1=aNJMCtcvqzvxn1j9KonJ) and [Ian Ludlam](http://sandersnoonan.com.au/team-member?1=zOdq2Yodf3oMpnlGYum4) and [Kaylene Fox](http://sandersnoonan.com.au/team-member?1=qwvLwuK5smA7HXGPEY40) and [Marilyn Hatzianestis](http://sandersnoonan.com.au/team-member?1=MTN3Y9FJxEn5msDHwYv7) live here.

To fix this issue, please make sure that you use the previous HTML(un-encoded) codes you were using without changing </div> to </div>, as this will not show the HTML Codes in the Popup Content properly. Additionally, make sure that if you have a Single Quote inside the Popup HTML Content, make sure that it is escaped properly using Backslashes. Example, if you have the following Content in the JS:

html: 'Tom's Place'

then, it should be escaped like this to avoid unwanted JS errors:

html: 'Tom\'s Place'

This is the code that will work fine.Please make sure that you apply this to all your Popup Contents for the Google Maps and all your issues related to Google Maps should be resolved. Hope this Helps![sb_private_reply] We assure you that there will not be any further delays in support![/sb_private_reply]

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

SStuAndrewsApr 7, 2017

You guys rock! Thank you so much, that was exactly it (and I realise you told me that above as well).

Backslash escape.

Thank you!

SSemicolon WebSTAFFApr 9, 2017

Hello,

Really Glad that your issues were resolved and Thank You so much for all your Patience with us![sb_private_reply] We will assure that we serve you better and faster in the future.[/sb_private_reply]

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

SStuAndrewsApr 13, 2017

Hi Team,

So while the first issue is solved, the next issue is:

Q: Why is the google map not showing at the full height of the surrounding div?

Link: http://www.sandersnoonan.com.au/sayhello

SSemicolon WebSTAFFApr 15, 2017

Hello,

You can simply change the following JS code which has the Google Maps JS Code:

$(document).ready(function() {

to the following:

$(window).on( 'load', function() {

This will definitely fix your issue. Hope this Helps!

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

SStuAndrewsApr 18, 2017

Thank you, that solved the issue!

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