gmap.js usage

Question

Since the gmap jquery extension doesn't allow to make overlays, I wanted to adopt the gmaps.js library which can be found here. Unfortunately because of Canvas's responsiveness, I believe the map div resizes before the map is actually generated leaving a large gray area over the div container leaving only a 10th of the map in view. If you could help me figure out this problem, that would be great. I'm currently using the real estate demo template to work in. You can view a live version here.

SemiColonWeb · Accepted Answer

Hello,

This should be possible and might not work if you add the JS Codes outside the Windows Ready/Load Area. Additionally, also make sure that you add the JS Script Link & Codes at the bottom of the Page to ensure maximum compatibility.

Meanwhile, while checking out your Website we could find multiple JS related errors on your Page which is causing the Maps to not load properly. Please try checking out the Errors on the Inspect Element Console.

Hope this Helps!

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

MiloMagnus · Answer

I've taken to hand coding the Google Maps API and I still come up with issues. Please check here and advise. I've included everything in the jQuery(document).on('ready', ...) instances. Was that what you meant by keeping everything inside the "Windows Ready/Load Area"?

MiloMagnus · Answer

It works the way I want it to AFTER the screen is resized.

Semicolon Web · Answer

Hello,

Can you please consider using the following code replacing the on Ready Function:

jQuery(window).on('load', function()

This should fix the issue. Hope this Helps!

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

MiloMagnus · Answer

Works great! Thanks