Framework7 and google maps - google-maps

im new to Framework7 and google maps and I try to implement a page which display a map and a search box
map = plugin.google.maps.Map.getMap(div,options);
// Create the search box and link it to the UI element.
var input = document.getElementById("pac-input");
var searchBox = new google.maps.places.SearchBox(input);
this is my try to make it work but i got this error message :
vue.common.dev.js:630 [Vue warn]: Error in mounted hook: "ReferenceError: google is not defined"
can someone help or explain how to add map with search in framework7?

Related

How to update a Youtube channel's name and icon with YouTube API in Google Apps Script

Code:
const keywords=["keyword1","keyword2","keyword3"];
function updateChannel() {
var channels=YouTube.Search.list("snippet",{
q:keywords[Math.floor(Math.random() * keywords.length)],
type:"channel"
})
var channelpick=channels.items[Math.floor(Math.random() * channels.items.length)]
var channel=YouTube.Channels.list("snippet,brandingSettings",{'id': "<channel_id>"}).items[0];
channel.snippet.title=channelpick.snippet.title;
channel.snippet.thumbnails.default.url=channelpick.snippet.thumbnails.default.url;
YouTube.Channels.update(channel, "snippet")
}
So, what my code does is that it searches for channels under a random keyword and then sets my youtube channel's name and icon as the name and icon of the channel it picked
But an error is occuring when I run YouTube.Channels.update() function
Error: GoogleJsonResponseException: API call to youtube.channels.update failed with error: 'snippet'
Does anyone know how to fix this error?

Working with php/mysql display information on google maps

I have a MySQL address database which contains all the necessary information to look up the address on google maps. Each row with data contains an extra field naming LATLNG. Which contains the Lat and Lng in the preferred format of google maps. ####, ####. I have already created a viewing page with a ‘show’ button to display the content on a separated html page in Google maps with the address above it.
The problem is that I could find all kinds of tutorials (also from google themselves) with the vast possibility’s that google maps provide. The feature I would like to use however isn’t found in a tutorial. And whatever I do, I seem to get stuck with the result of it.
Example (own database):
After each address field there is a button with the next caption:
echo '<td>Show</td>';
Example (google maps) what opens after pressing the SHOW button:
<script>
function myMap() {
var Lelystad = new google.maps.LatLng(LAT LNG INFORMATION);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: TOWN NAME, zoom: 15};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:TOWN NAME});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "DISPLAY CONTENT OF ADDRESS ABOVE MARKER"
});
infowindow.open(map,marker);
}
</script>
What I want is that after pressing the ‘show’ button the latlng from that given address is being picked up by google maps and show it.
Hopefully someonw can help me, if some of the information is not clear enough don't hesitate to ask me.
I am not sure you want to use the JavaScript. There is a very simple API giving you the latitude and longitude through a URL:
http://maps.googleapis.com/maps/api/geocode/json?address=eiffel%20tower,paris
where "address" is the address you are looking for. You must first register to obtain a key and you are limited to 2500 requests per day (but you can store the results in the database).
See full documentation here: https://developers.google.com/maps/documentation/geocoding/intro?hl=fr

Getting Latitude and Longitude from Google Places Autocomplete API

Im using the Google Places Autocomplete API, to have an input in which users type a city and get suggestions for which place they are searching for.
I need to get not only the name of the place but the Latitude and Longitud of the place for then centering a google map there.
The problem is that Google Places Autocomplete API just returns description of the place but not the coordinates, at least with what i tried.
Anybody knows if there is a way to get the Latitud & Longitud in the same request?
Many thanks to any help :')
All the information you are looking for can be found inside the Place Result. This is what your code would look like:
var input = document.getElementById("address");
var autocomplete = new google.maps.places.Autocomplete(input, {types: ["geocode"]});
autocomplete.addListener("place_changed", function() {
var placeResult = autocomplete.getPlace();
var name = placeResult.name;
// The selected place's position
var location = placeResult.geometry.location;
// The preferred viewport when displaying this Place on a map.
// This property will be null if the preferred viewport for the Place is not known.
var viewport = placeResult.geometry.viewport;
// This is assuming your google map is saved in a variable called myMap
if (viewport) {
myMap.fitBounds(viewport)
}
else if (location) {
myMap.setCenter(location)
}
});
I recently created a jQuery plugin that makes interacting with Google Maps Autocomplete a breeze. This would be the code to center a map every time a place was selected:
$("#address").geocomplete({
map: myMap
});
The plugin will also allow you to autofill an address form, adds custom styling, provides callbacks and fixes an annoying scrolling issue.

Popup Box with Link to other google Document in Google Document

I have a script that I run from the menu of a google document. It essentially functions like this one: https://webapps.stackexchange.com/questions/47173/how-to-automatically-open-a-created-text-document-after-it-being-created/47649#47649.
I want a function that is similar the one in the link above except that the popup with the link is shown in a google doc rather than a google spreadsheet. That part of my script looks like this (title and url are defined above that part):
var docnew = DocumentApp.getActiveDocument();
var app = UiApp.createApplication().setTitle("Open Doc")
.setHeight(50).setWidth(400);
var vPanel = app.createVerticalPanel().add(app.createAnchor(title, url));
app.add(vPanel);
docnew.show(app);
I then get the following error. "TypeError: Funktion show in Objekt Document nicht gefunden", which is German and means "TypeError: Function show not found in object Document".
Can somebody help me with this?
Thanks a lot in advance.
Best,
Phil
The show method works only in spreadsheets, in Google Documents (and also in the new version of spreadsheets) you can use this code :
SpreadsheetApp.getUi().showModalDialog(argument);
The documentation shows some examples.
Your code snippet would be like this :
function showUi(){
var docnew = DocumentApp.getActiveDocument();
var app = UiApp.createApplication()
.setHeight(50).setWidth(400);
var vPanel = app.createVerticalPanel().add(app.createAnchor(title, url));
app.add(vPanel);
DocumentApp.getUi().showModelessDialog(app,"Open Doc");
}

How to show contact photo using google apps script?

Hi I'm trying to show contact photo using google apps script,
this is what i have so far. so i connect successfully to contacts,
take first one, it's id, then i authenticate using OAuth, load
full contact profile, i even have a link to the photo, but it
won't show. I read somewhere that adding access token to link
would help but where to get this token from?
function doGet() {
var app = UiApp.createApplication();
var c = ContactsApp.getContacts();
c1 = c[0];
var options = OAuthApp.getAuth('contacts','http://www.google.com/m8/feeds');
var response = UrlFetchApp.fetch(c1.getId().replace(/base/,'full')+"?alt=json&v=3.0", options);
var object = Utilities.jsonParse(response.getContentText());
app.add(app.createImage(object.entry.link[0].href));
return app;
}
When i'm using UrlFetchApp.fetch (that includes options paramer that include authorisation) it loads the image data, but i don't know how to authorise app.createImage instead.
UiApp can't display private images. Star issue 912 http://code.google.com/p/google-apps-script-issues/issues/detail?id=912