I am using the Google Maps Places API to have the ability to autocomplete searches for places. Currently, I am loading in the Google Maps JavaScript API with the following code:
window.onload = function () {
var autocomplete = new google.maps.places.Autocomplete(input);
The issue with the code above, is that I have to wait for the page to be fully loaded, before the Places API is loaded into the page. This results in a few seconds of me being unable to search even though to me, the user, it seems as if the page is fully loaded.
The reason that it is currently placed within the window.onload is because the JavaScript Places API needs an input field to attach to, which needs to be loaded before I try to access it.
My question is, is there any other way of loading in the Google Maps Places JavaScript API to not have a few seconds of the page seeming like it's loaded? Or, is there anything else I can do to have this issue avoided?
You can remove async and defer from your link to load it synchronously. I am not sure if it is the right thing to do but it will definitely fix your issue.
You could disable your input field, and/or overlay your page with a busy indicator of some sort early on, then only enable the input field and get rid of the busy indicator in your onload function, after you set up autocomplete.
I found that if I place the script after the HTML element is loaded, the browser will still show that the page is being loaded as the Google Maps Places API is loaded in.
Related
I am currently trying to implement the Google Tag Manager but I run into a problem since the GTM appends the tags right before the closing tag of the body.
Whenever I have a template that needs to call a bit of code from one of the scripts in the Google Tag Manager I get an undefined error. This is obvious since it does not matter where I place my script in my view, GTM will always come after it since it appends right before the closing body tag.
Is there any way to fix this behaviour and why does Google do it like this? I understand that it helps with non-blocking but they might as well just place async attributes on the scripts and it will almost do the same?
An example I have Facebook Pixel as one of my tags in GTM and I need to be able to make a specific event call when I am loading a certain page as my view.
fbq('track', 'Search');
Ofcourse this needs a fbq instance to begin with. This leave me with only one option and that is to try and place my script in my footer which is a general template and it will get messy.
Any workaround for this behaviour?
The issue you are facing is that the Facebook library is not completely loaded when you are calling your function.
One method would be to migrate your Facebook code to GTM trigger it on all pages
and fire your specific code on dom ready
You could also use the code from below and see when the _fbq.loaded variable is set to true.
https://gist.github.com/chrisjhoughton/1dc91dd7bd95717e08d3
You would have to create trigger based on this javascript variable.
Hope this helps
I am having some trouble getting a countdown timer to work on my jQuery mobile page. If I have it load on a static html page it works as it should (see that page here:http://www.beingproperties.com/match-game). when you hit the start game the timer starts.
I have recently ported this over to the jQuery mobile framework and the timer is not working on that site (see this here by going to the link and clicking the 'multi-page link, then the start game link): http://www.beingproperties.com/match-game/home.html).
I have tied using 'pageshow' as scene below and though I get it to work and throw an alert, once I add in my code to execute nothing happens.
$('#shapesPage').live('pageshow', function () {
I know that it's something regarding the ajax loaded page, though all other jQuery fires on this page except for the countdown timer. I'm at a loss and would much appreciate a kick in the right direction.
I used the inspector and it's not very informative. Any insight to get this resolved, or proper ways to debug these types of issues would be much appreciated. thanks in advance. -Chris
Looking at the source for home.html, it seems that you haven't included js/plugins.js, only js/index.js.
I know you've included it in shapes.html, but JQM is a bit weird about loading external scripts when loading a page via ajax, as stated in the documentation:
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.
Edit: You can not call any functions that modify the DOM until it is fully loaded. This is signaled in JQM by the pageinit event. Read about scripting and events for more info.
Try surrounding your javascript for shapes.html with
$( document ).delegate("#shapesPage", "pageinit", function() {
...
});
Issue:
I have a dialog page in a jQuery Mobile document which contains a small Google map to show a location. I want to load the map before loading the dialog page. As in:
$("#dialogPage").bind("pagebeforeshow", function() {
initializeSmallMap();
});
However, Google Maps works incorrectly whenever the div the map is contained in is has a display proprety of none (see Google Maps Display:None Problem). And since this function is executed before the page is actually loaded, the containing div naturally has a display property of none.
Now, obviously, there's a simple solution to this. All I need to do is initialize the map after the page has been shown, which makes the div have a display property of block:
$("#dialogPage").bind("pageshow", function() {
initializeSmallMap();
});
However, since the dialog has already been loaded, there is an annoying, noticeable flicker when the map appears.
Question:
How do I get rid of the described flicker?
Possible Solutions:
Making the div containing the map have a display property of block before the dialog is loaded. If I wasn't using jQuery Mobile, it would be simple and painless to implement this effect while still hiding the map until needed:
position: absolute;
left: -10000px;
display: block;
However, since jQuery Mobile automatically overrides page styles, I don't know how I could get this to work.
Explicitly telling the Google Maps API the size of the div containing the map. I Googled this option and had no luck, but considering my terrible Googling skills, I would not be completely surprised if this was actually possible.
Others - I'm open to any ideas on how to get rid of the flicker effect. The above are just some possible solutions.
$("#dialogPage").promise().done(function() {
//Code to execute when map is loaded.
});
You could try it out. Just hide the element with the attr() and display it with attr() when promise().done is executed :) And you should be in no use of display properties.
Ref - Promise
I have a site which pulls pages into a dynamic interface. Currently, the main page requires that any javascript the external pages will need be loaded with the main page. Most javascript the external pages have are objects that are built when the page gets pulled in, but first, which causes issues.
It's a little hard for me to explain for some reason so here's a simple walk through of process.
1.Request a page be pulled in
2.Based on a variable passed to function create a specific object which will be associated with the physical html coming from the page ( This is the external Javascript)
3.Load page into the objects frame
This flow requires that the external javascript be attached to the main page not the page being pulled in.
I want to switch steps 2 and 3, but I assume that I will need a way to know that the page and all its scripts have fully loaded before attempting to create the designated object, but I have no idea how to do that.
I am using jQuery and hope that this can be accomplished without a plugin but if it is needed then so be it.
Thanks
Update
Good questions. So the pages are local pages that we build at this point, so we know what to expect. Also the pages are loaded just into basic div structure.
Specifically the main page makes a request to get a page. That page is returned in the form of a string and is then pasted into a div element that is on the main page. The pages are more like fragments I guess. But they can range from fairly complicated and require a bit of javascript to not using any javascript at all.
And the external javascript would generally be added via a script tag and is not inline.
Due to the dynamic nature of the page we do NOT use IFRAME's, they cause issues with the movement of our modules.
If you're using an iframe then I imagine you are changing it's src attribute. To get an alert on when that iframe is done loading you should include a script on the page within the iframe:
<script>
$(window).load(function() {
alert("All Done");
});
</script>
If you are just requesting a string version of a page via AJAX and populating a div you need some extra JavaScript to detect when those dynamically loaded script files have finished downloading to the client.
I would visit this link to get you started.
A combination of Nick and Mic's solution.
In your IFRAME pages, you need a way to determine when the content is done loading, or ready, and then alert your main page:
<script>
$(function() {
parent.frameReady();
});
</script>
In your main page, you can code in the hook from your IFRAMEs:
<script>
function frameReady() {
// attach custom js to iframe here
}
</script>
The Scenario
Using jQuery, I have a page that has a popup overlay containing locations marked using Google Maps.
The overlay works using 2 pages setup as follows:
The main page opens an overlay via a text link to a map. The complete map page is then loaded into the overlay.
The map page itself contains Google's API and initialization code to load the correct map.
As they are, the overlay and map work fine providing I load the whole map page.
The Problem
My problem is, I don't want to load the complete page, I want to load just the particular div holding the map.
I'm using jQuerys Ajax "load" function, (as follows) to load the complete map page.
wrap.load(this.attr("href"))
If I try to change this to load a particular DIV (as follows), the pages DIV content is loaded correctly, except the Google API is not loaded, meaning the map does not display.
wrap.load(this.attr("href")+" #map_wrap")
I have tried including Googles API and initialization code on the first main page that opens the overlay, however, this still doesn't work.
I've also tried embedding the code within the loaded DIV, again, no luck.
The Question
Is there a way to load the map pages API script along with the DIV?
After rearranging the page coding, I solved the problem.
I included the Google Maps API code into the main page that opens the overlay, then when the overlay is opened, I needed to call the Google Map initialize() function.
Problem solved.
Just for the sake of completeness (if it's not too clear for others from your answer), is worth mentioning that it wasn't working because by just calling the DIV element, the necessary Javascript statements (which were outside the scope of that element) weren't being started nor called.
To solve it, you could have started them before using your load method or, as you did, as the general invocation of JS files.