Google places API automatically get place from a string - javascript

In my Page I'm querying my backend to get an address and placing that address in my input.
Now using Jquery I get that input value and want to get the place from google places api.
//placing value from parameter my input
var pickup = $state.params.bookingInfo.address;
$("#address").val(pickup);
//Calling for places
autocomplete = new.google.maps.places.Autocomplete(document.getElementById("address"));
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
console.log(place);
});
Here I'm getting places as undefined as there is no event in the map.
All I need is how do I get the place with the address i get from my query?
Thanks in advance.

See the official Google dev docs and source sample found here:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
In your case, you can embed this code in as is; tweak the CSS in the head (for example hide the map if it isn't needed); copy the sample code and plugin your key and do some live editing until you figure out how to make it work best with your existing page; first try it as-is just to ensure it's working properly; after you can begin modding it to fit your needs. I was in your situation before actually, I found the source above to be the most helpful in getting the place details callback. Hope it helps you as well.

Related

Google Tag Manager Virtual Page View

I have a little problem setting up a virtualPageView which should override the URL which is sent to google when no result is present.
Heres what I have as JavaScript code:
function returnNoSearchResultsGoogleTagManagerCode($searchterm){
if ($searchterm == "") return "";
$requestUri = $_SERVER['REQUEST_URI'] . "&no_result=".$searchterm;
$js = "<script>
$(document).ready(function(){
dataLayer.push({
'event':'empty_result',
'virtualPageURL':'".$requestUri."'
});
});
</script>";
return $js;
}
As you can see, I want to use an event trigger (empty_result).
In google, I use a Trigger to determine if the Page is a no result Page. First i created a custom Variable with custom JS
function(){
if (document.getElementsByClassName('ga-no-result').length > 0){
return true;
}else{
return false
}
}
The class is set, if the SearchEngine can't find a result. So far so good.
I also created a dataLayer variable to hold the virtualPageURL
Now I need an event which is triggered if the variable is true.
Finally I created a Tag with type PageView which is fired when the event occurs:
Until now it seems okay, the Tag is properly configured (i guess) but if I do a search which has no result, the Page URL is not overridden
The Tag is properly fired and the variables are filled. The overview of the dataLayer shows a correct dataLayer event.
But the PageURL is not overridden... Even if I wait a whole day, the category isn't sent to google.
What am I doing wrong?
I would be very thankful if someone would have an idea or even a solution :)
Thanks in advance
exa.byte
UPDATE:
Hey, I forgot to mention, that I want to use the new page variable as the string which google should use to determine the searchterm and the searchcategory
In Google Analytics I configuered the search as the "q" parameter and the "no_result" as the category.
Is it even possible to change the string which google will parse in the end?
To send a virtual pageview to Google Analytics, the field you need to change is page not {{Page Url}} , also the title field is often used.
That's really the only two things you need to do to send a simple virtual pageview.
Extra: I always start my pagepath with /virtual/ to be able to recognize which ones are virtual pageviews easily in GA
For virtual page view you have to change Field "page" - in your GTM-OnSearchEmptyResult you are changing "{{Page URL}}" - I don't think that's correct way to send virutal pageview. Also if you need to change hostname use Fieldname "hostname".
In preview mode you will not see Page URL changed in Variables Tab, you have to go to the actual GA tag that is fired and check it's values. You can either do this in GTM's preview tool or you can use standard developer tools - Network Tab and see what values are being sent to GA:
You can see "dl" parameter is the current page, if you set up virtual page you should also see parameter called "dp" this is going to be the new value of page in your GA.
If you want to setup virtual pageview you have to use page instead of {{Page URL}} in your fieldname and for Document title use title in you fieldname.
for more field reference of google analytics follow below link
https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#hitType.
If you don't want to mess around with custom Tag Manager events it's still possible to use the good old ga method, even if you don't include the Analytics code on the page. You just need to fetch the right tracker dynamically, as explained by Simo Ahava in this thread.
if (typeof ga === "function") {
ga.getAll().forEach((tracker) => {
tracker.set('page', '/my/path'); // <- change here
tracker.send('pageview');
});
}
I also put it in a gist here.
thanks for your help. I think I got rid of the Problem and have solved it now. I will describe my solution below:
The solution is quite simple.
I had an error/ spelling error # google backend. I set the search_category parameter to "no_results", but used "no_result" for implementation...
Pretty dumb, but sometimes you just won't see the wood for the trees...
I created a new Trigger as helper "HelperDomReady" to trigger the only if DOM is ready and the variable "isEmptySearch" equals "(bool)true"
Now I can see the searchterms which have no result in google backend in the "sitesearch categories" summary. Since I won't set the parameter at all, if the search had at least one hit, the site-search category shows "not-set" for successful results. Therfore the category-section will only show searches without a hit. Problem solved :)
Disadvantage: The searchterm is also listed in the normal list. But I think this is negligible

How do I pass a value from an HTML form submission to a Google Sheet and back to HTML in a Google Apps Script Web App

I'm trying to create a basic time clock web app.
So far, I'm using this script to create this web app which takes the input values and puts them in this spreadsheet for the time stamping part.
I need it to use one of the values from the form and perform a lookup in this sheet (take the longId and find me the name) and return the (name) value to the html page as a verification for the end user that they were identified correctly. Unfortunately, I don't know enough to grasp what I'm doing wrong. Let me know if I need to provide more info.
Edit 1
I'm thinking that I wasn't clear enough. I don't need the user info from entry, I need the user from a lookup. The user will be entering their ID anonymously, I need to match the ID to their info, and bring the info back for them to verify.
Edit 2
Using the link provided by Br. Sayan, I've created this script using this spreadsheet as above to test one piece of this. The web app here spits out: undefined. It should spit out "Student 3" Still not sure what I'm doing wrong.
One way for the next button to grab the student input field:
<input type="submit" onclick="studentName(document.getElementById('student').value)" value="Next..."/>
That sends the value to this func in Javascript.html:
function studentName(value) {
google.script.run
.withSuccessHandler(findSuccess)
.findStudent(value);
}
Which sends it to a findStudent(value) in Code.gs
You do the lookup and the return value goes back to findSuccess( result ) back in Javascript.html. Handle the result from there.
Also consider keeping the stock preventDefault() code that comes with the Web App template in the Help > Welcome Screen.
Please try this one:
(source: technokarak.com)
Also please have a look at:
Retrieve rows from spreadsheet data using GAS
EDIT:
Please make these changes in your function and let us know.
function findValue() {
var data = SpreadsheetApp.openById("15DRZRQ2Hcd7MNnAsu_lnZ6n4kiHeXW_OMPP3squbTLE").getSheetByName("Volatile Data").getDataRange().getValues();
for(i in data) {
if(data[i][3] == 100000003) {
Logger.log("yes");
Logger.log(data[i][0]);
var student = [];
student.push(data[i][0]);
return student;
}
}
}
It is a complicated answer, I have had a lot of success with:
function process(object){
var user = Session.getActiveUser().getEmail();
var key = object.Key;
send(key);
}
function send(k){
var ss =
SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var lastR = ss.GetLastRow();
ss.GetRange(lastR,1).SetValue(k);
}
On your html button you will need to have inside the tags
onClick="google.script.run
.withSuccessHandler(Success)
.process(this.parentNode);"
In order for this to work, obviously you will need to have your fields named accordingly.
Edit: The only thing I did not include in the code was a Success handler, which will be in your html of the GAS script. This should point you in a direction that can resolve that.
Hope this helps.

Google Groups API wrong output

In Google Script Project I have 2 Google-API functions that should give out the same output.
can somebody please explain to me what I am wrong with, or maybe is it a bug in the API?
I have a group with 904 members.
Function "listMembersOfGroup1" is using the "GroupsManager" API, and is working correctly. the Logger displais "904.0".
And here is the code:
function listMembersOfGroup1() {
var group = GroupsManager.getGroup("group#domain.com");
var members = group.getAllMembers();
Logger.log(members.length);
}
But function "listMembersOfGroup2", which is using the "GroupsApp" API, is not working correctly (as far I understand). the Logger displais "753.0".
And here is the code:
function listMembersOfGroup2() {
var group = GroupsApp.getGroupByEmail("group#domain.com");
var users = group.getUsers();
Logger.log(users.length);
}
Is there any good reason why the "GroupApp" API gives out a different number?
Thanks in advance for your help.
.
(This is my first question on my first day on this site, I hope my question follows the rules.)
Welcome to StackOverflow. Your post was well explained.
The first API GroupsManager is used by domain administrators to manage their domain groups Check Here.
The secong one GroupsApp is used to manage google groups Google Groups API.
Your second call is retrieving users that belongs to the google groups mail passed as URL. Check full documentation here
So you're working with different google products.

How to programmatically subscribe a user to a google calendar using javascript?

Hey i'm able to authenticate and authorize a user with the javascript API for google calendar. what i want to do next is subscribe that user to a public calendar. I was thinking i could just call the google.gdata.calendar.CalendarEntry constructor with the id of the calendar but that didn't work
var entry = google.gdata.calendar.CalendarEntry("idOfCalendar");
i also tried creating an instance of a entry id with google.gdata.atom.Id("idOfCalendar"); and adding that to the CalendarEntry constructor. Using the set methods didn't work either.
I use the InsertEntry method to add the entry but i get the following error
Error: Valid calendar id must be supplied for adding calendar to favorites list in allcalendars projection.
I can access the events of this calendar using google.gdata.calendar.CalendarEventQuery()
The google api for javascript doesn't give a lot of examples anyone know the answer to my problem or a good resource for working with the google calendar api? do you think i should be using php or jason instead?
** Edit
I found an example of what I want in the Java Api link so i tried
function addSubscriptionToCalendar() {
var feedUri = "http://www.google.com/calendar/feeds/default/allcalendars/full";
var calendarEntry = new google.gdata.calendar.CalendarEntry();
calendarEntry.setId("nhl_21_%54oronto+%4daple+%4ceafs#sports#group.v.calendar.google.com");
calendarService.insertEntry(feedUri, calendarEntry, function(){alert("calendar added")}, handleError);
}
but i got the same error
You should be using owncalendars feed to modify/add calendar entry for the authenticated user not allcalendars.
Sounds like your calendar id is invalid. The id from your second example appears to be URL encoded. Try using the decoded value:
nhl_21_Toronto Maple Leafs#sports#group.v.calendar.google.com
The gdata API for calendars has been switched off; the new way to do this is via: https://developers.google.com/google-apps/calendar/v3/reference/calendarList/insert

How do I catch an invalid API key for google maps

I have this code:
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=babab" type='text/javascript'></script>
If the key is invalid then it pops up an alert, but I want to perform some action in this case. I'm not sure how to hook into it though. Any ideas?
Google does not offer an external method of checking the Google Maps API key. Hence you cannot query some service with e.g. "Is this code valid abcde1234" and get a TRUE/FALSE response.
There is a discussion on how the Maps API key is generated. But I suggest you look at a post from Mike Williams about the GValidateKey function. This is the function actually doing the magic validation - what it exactly does, like creating a hash from your Google account / domain - we don't know.
I see two solutions for your problem of checking whether the API key provided is correct:
Overwrite the incoming alert with some custom code (check for the content of the alert, or check if an alert occurs withing X seconds after page load)
Somehow get the GValidateKey function to validate your key beforehand. Maybe you can call it before referencing the API Javascript? Sounds kind of hackish to me...
The problem you will likely have is that you don't know what Google actually checks. The referrer, the referring site, the host - many possibilities (it is not the IP address of the server, but the name plus some additional information).
I just ran across the need to perform an action if an invalid API key was used. Google's documentation states:
If you want to programmatically detect an authentication failure (for example to automatically send an beacon) you can prepare a callback function. If the following global function is defined it will be called when the authentication fails.
This was all I needed to do:
function gm_authFailure() { // Perform action(s) }
For modern browsers (IE9+ and others) you may use DOMNodeRemoved event. You just need to add event handler to the element that you pass to the map constructor:
var map = new google.maps.Map(element, myOptions);
element.addEventListener("DOMNodeRemoved", function(e){
if (e.target === element){
//your code here
element.removeEventListener("DOMNodeRemoved", mapWasRemovedHandler, true);
}
}, false);

Categories

Resources