Change Google Places Autocomplete Language without reloading - google-maps-api-3

It's easy enough to specify a language in Google Places Autocomplete
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places**&language=en**"></script>
That's well and good. But I need the ability to change the language on the fly without reloading the page. Is that possible?

I think you can do this by dynamically reloading the google library each time you want to switch the language. It will result in reloading the entire map, but not the page.
https://groups.google.com/forum/?fromgroups#!topic/google-maps-api/DGhG-D37Glw
This discussion has a sample on how to do it(http://gmaps-samples.googlecode.com/svn/trunk/dynamicloading/scriptappend_hl.html). Basically you append the new language appropriate library to the page, and reload your map. The post is a little out of date, but I think the concept is solid. I suspect you may have to new up another autocomplete instance each time you switch languages as well.

Related

Custom Google Form? Example of Google Form API?

I'm trying to make a google form look like my own site. I found examples of how to do this on How to style Google Forms and google-custom-form (GitHub project), but I tried both of the examples they give and they seem to fail now.
I had a look at Class Form - Google Apps Script which seems to be like an API, but I can't get my head around the documentation. Does anyone have an example of it working. Or has found another way of getting this to work? It would be really handy to do as embedded forms look really out of sync with the rest of the site.
The API you're linking to is an apps script API. This is needed if you want to create dynamic forms (dynamic amount of questions, dynamic answers,...) but not for custom styling. An intro to appscript can be found on this page: https://developers.google.com/apps-script/
You could just create a form manually on https://www.google.com/forms/about/
You can change the styling and colors in the top-right of the page. When you are ready to embed the form on your own page you have to press "SEND", an select the embed icon <> at the top.
I've worked with this a ton, and still have issues with it. Been learning the new api v4 for sheets but still having trouble, it is still in beta too. For now I can recommend this solution though by heaversm on github.
https://github.com/heaversm/google-custom-form
The example fully works as long as you find the entry.xxxxxxx for each field and replace in the appropriate js. To avoid the embed issues, give your form submit on a click function that has the event as the input and then preventDefault on the event like so:
$('#submit-button').on('click', function(event){
event.preventDefault();
// continue code from heaversm
});
Hope this works for you. Cheers

Tracking Clicks [Outbound Links] with Autotrack.js

I am trying to find a clear method of tracking clicks to external sites from a site I have built, it appears a lot of information available on this is contradictory or incomplete. I have found autotrack.js on Github which looks like a simpler method, so my question is three-fold, I'll make the question super clear so there is a super clear answer for others in the same conundrum as me.
What snippet/script is added to the HTML and where? I currently have the standard GA snippet for tracking page loads before the </body> tag.
Should I amend / edit the <a> tags to make sense of the who clicked what? I.e. name them, can this be avoided or automated, what I mean is there a script smart enough to name it the same as the destination, like reallygoodlist.com or fb.com/reallygoodlist ?
Is there any GA work required? Set up Goals etc, ideally I would be looking to avoid this - I have a lot of links.
Here is my site (if it helps):
http://www.reallygoodlist.com
1) What snippet/script is added to the HTML and where? I currently have the standard GA snippet for tracking page loads before the tag.
The installation and usage section of the autotrack documentation shows how to install autotrack, so I'll just link to it rather than repeating.
If you're just using the default GA tag, you can probably copy/paste most of the code there, changing the parts relevant to you: e.g. if you only care about outbound link tracking, then only include the outboundLinkTracker plugin.
It also looks like you're installing code via npm, so in this case you can link autotrack's source file in the node_modules directory as you've done with the Babel polyfill.
<script src="node_modules/autotrack/autotrack.js"></script>
2) Should I amend / edit the tags to make sense of the who clicked what ? i.e. name them, can this be avoided or automated, what i mean is ether a script smart enough to name it the same as the destination, like reallygoodlist.com or fb.com/reallygoodlist ?
Autotrack's outboundLinkTracker plugin automatically sets the link's URL as the event label, so you probably don't need to do anything unless that's not enough.
If you want more control than that, setting one of the common options will allow you to custom any data that is sent to GA.
3) Is there any GA work required? Set up Goals etc, ideally I would be looking to avoid this - I have a lot of links.
Not for outbound link tracking. It's just tracking the data as events, so you'll be able to find them in your event reports in GA.

google analytics event tracking for PDF downloads, Generic approach

I need to implement the GA tracking event for PDF file downloads, For that had searched a lot and found out many code where i can add some code to links and track them from GA's content section, But the problem is I do have a lot of PDF link on the page and don't want to edit every link and I want the code to be generic for future uploaded links also.
So what would be the best approach for this task, Any referral links would do or any code would be highly appreciated .
Thanks in advance.
You can explore the use of Google Tag Manager, where you can create a generic tag that will return to you information for each individual link. GTM uses things called "macros" which is like a template that returns useful information including the clicked element's ID, or pathname (which in your case for the PDF files, would all be different). So in this way, you would only need to call this macro each time a PDF file is clicked. No coding is involved using this standard approach through GTM. Here's a link to a descriptive explanation: http://porcelainduck.com/2014/03/track-pdf-downloads-google-tag-manager/. You can see that it uses the {{element URL}} macro that returns the PDF's unique URL. GTM not only applies to current links, but also all future links.
Based on the tags which you've used to mark your question with you're using C#, ASP.NET
If that's the case, can't you create a base page that on rendering replaces all the
I would recommend adding a click event with JQuery to all links or all links inside the download widget class. Inside the click handler I would then grab the link text and use that as part of the Google analytics event you fire.

Getting Google Spreadsheet in the Background

We have a Google Spreadsheet from which we wish to load data into our webpage.
I started by using the Google Spreadsheet APi via C# and the Google API .NET libraries to read the spreadsheet and load it into an html unsorted list.
The spreadhsheet has about 200 rows, but could have more, as it will be updated frequently. So the problem is that the users have to wait until the spreadsheed data is retrieved and parsed before they can see anything in the webpage (the page is white whilst loading).
How can I load this data in the background whilst the page loads?
I've already written my code in C# and don't much want to spend the time swapping to javascript, but I will if I have to.
Could I use the AJAX Control Toolkit to do this? I know it will load html, but can I use it to fetch google data?
What can I do here that would be fast and easy?
[Edit]
The account that hosts the google spreadsheet is inside a google domain, so it's documents can't be shared to the public as a whole - only to individuals. The C# libraries allow me to use the account's username and password to log into the account to get the spreadsheet data, and so the spreadsheet doesn't need to be shared at all. Even if I went with a javascript/ajax solution, I would yet need this functionality.
Well, this probably isn't the BEST answer, but it IS a solution. I'd like to see if y'all have a better one.
Anyway, I found this, which is an example of how to use an asp:Timer to delay the calling of a function for a certain amount of time - in my case, long enough for the page itself to load. At least this way, the user gets to see the page, and can watch the nice loading-gif until the actual content arrives.
It is an AJAXy approach that allows me to keep my c# programming without having to add any javascript.

Loading web application content through AJAX

I'm about to build a web application(not web presentation) which will load its content through AJAX (jQuery) into a specific div. There will be a menu above the div and when a user clicks on an item from the menu, the appropriate page will be loaded into the main div.
I'd like to know if there are any cons and pros of choosing this pattern for a web application.
So far I'm avare that the browser back button and history/url will be gone.
Two possible downsides are that it could make it difficult for users to bookmark content on your site and difficult for search engines to differentiate pages on your site.
You should probably provide more information on your reasons for taking this approach. You might have good reasons or it might be a case of using a technology (AJAX) because it is cool to use.
If you want to give the users the impression of fast responsiveness, then yes AJAX load your pages, but still have a different url for each page. This will take more code but it will solve both issues that I mentioned.
http://yourdomain.com/home.aspx //loads its own content via AJAX
http://yourdomain.com/contact.aspx //loads its own content via AJAX
etc
This is really only appropriate if you have a lot of content, or where the content involves time-consuming calculations, such as on a financial site. In most cases, it would be less trouble to just load your pages normally or break you content into paged chunks.
The main con of this approach this will make your site very difficult for search engines to crawl. They don't read Javascript, so your content won't get seen or indexed by them. Try to do progressive enhancement so that they (and any users who don't use Javascript, e.g. screen-readers) don't get left behind.
On the other hand, you can keep browser history functionality. This can be done using the URL hash, e.g. http://www.example.com/#home vs http://www.example.com/#about-us. The nicest way to do this is to get Ben Alman's hashchange plugin and then use the hashchange event:
$(window).hashchange(function(){
var location = window.location.hash;
//do your processing here based on the contents of location
});
This will allow your users to use the history function and the bookmarking function of their browsers. See the documentation on his site for more information.

Resources