I am trying to add an image of a map using the Google Maps Static API in React Native.
I am using the directions api to obtain the overview_polyline data and incorporating that into a url that is then signed using the google cloud digital signature before being passed in to the source prop ({ uri: (my url)}) of Image.
The image is not rendered on screen with no error messages.
I have tried using fetch() in a trycatch statement and the response I get is:
The Google Maps Platform server rejected your request. Unable to authenticate the request. Provided 'signature' is not valid for the provided API key, or the provided 'key' is not valid.
The signature was checked against the URL: /maps/api/staticmap?&size=400x400&path=weight:3%257Ccolor:0x0352A0CC%257Cenc:(polyline)&key&mapID&signature.
However, when I use the exact same url in safari and chrome (with the same API key and signature) it renders the image.
I have tried:
this solution
this solution
both altered the url so it no longer worked in the browser.
Below is an example of a url I am using:
https://maps.googleapis.com/maps/api/staticmap?&size=400x400&path=weight:3%7Ccolor:0x0352A0CC%7Cenc:s~xdIxe~GyBh]mFpG{AqGs#qFmKgVoVaNjPkcAzJ{sBzc#qqA|XaxAwFc_A{Ywm#u[mOgYgc#}UiuAgVgtBsDaMkG`D_BaZpCadFfKmxBxXgn#hq#m\\nb#pCta#vNncAhKd`AzSp|#xUpk#yVvt#q^`_AzAlw#pT`l#r`#rfDdjAtn#b[jj#jcAl[pg#tj#ne#nn#jIxbAkB~wAaq#zl#aLnf#Rnc#dI~m#aBnwCzFj}A~a#j}#|B~h#eIxp#hS|`#xHl[_Grr#_d#rWgXfOme#ti#e_Apz#y}#~aA}hBpyAmuBjf#wUjZeAbdAci#peAuWrn#yKxl#ii#tYaYr]qIl^jDp\fRti#daAt`#ve#n[bMjo#dx#dz#ldAts#`[`]tRlTf]tf#reAll#tMhnAiBfd#nB~a#}Irg#pExn#vk#bp#|VpcAyZrkAcg#|~#yWzs#pCxdCz{#vr#_HnmA}gAnqAydApt#a^z_AaQ|}#`BdlA`_#x`#lMze#Jlc#zDtZ`Pbq#bb#~qAtEv|A{Tdm#eW`h#us#hkA_}Dhm#ywA`fAipAjyC{qBleA_b#xx#bBl_AxO|}#e]~cAkk#f]gFzx#l#zcAee#pdAiVtbA`_#fo#xc#pc#|Qp~#|LxtBzBhhA`Cx`#uHfh#bC~j#bHtcAaGvaA_b#xvAq_A~uAo_#xiA_f#|pCc|#taAcNdsAqj#hsBiwBvoEg_Ene#sRnj#uI|f#mi#|g#e_AzlAkaDtl#}_CniAggIrhAqgEje#mtBzz#oaBfdCgiFfx#ktAju#}{#z}#gy#ty#cy#hf#yy#vg#m~#hi#mbAfjAq|Ctn#glAjdAw`Azv#k}AxfByvEn|AccG`r#utBdVkxA`j#ylD`_A_gFzb#yz#ju#cs#zaBwrAnm#qTf|#{H`s#ig#xe#{x#ng#_m#zw#gYvaAuMz{#uj#teAot#hs#qu#js#uPfa#}x#boAmoB|kBalBfyBwVj{Gqs#n{#vEnhAdTz_#tGh`#eDje#_c#bl#ybAlo#wi#pj#qN|{Cq~#h^cUbb#}Er{#nE~}#kd#b}#}tB`d#uk#ti#}OrXcgAph#c`BrVu~A_P{uBnA_u#f]so#z|#aa#xcAqbAnu#gt#po#qSb|#rPvZN~ZoMfO}U~Eya#gNug#sHkGtCwQzt#ax#db#aRbM}_#`QkTjc#weAje#mo#dIqHvFeEn#pGdMfDrO|AbHoDbHT|XlEjVab#~c#{l#xXcTnOsJvq#am#`LaFlDgu#{AiN}Z{`A]mCHf#&key=XXXXXXXX&map_id=XXXXXXXXXXXea10&signature=XXXXXXXXXX
Use encodeURIComponent()
I used this function on the overview_polyline value returned from the directions api to convert the polyline to be uri compatible.
const encodeParseRes = encodeURIComponent(parseRes.route)
return (
`https://maps.googleapis.com/maps/api/staticmap?&size=500x500&path=weight:6%7Ccolor:0x0352A0CC%7Cenc:${encodeParseRes}&key=XXXXXXXXXX&map_id=XXXXXXXXXX`
)
Related
I've been using a public google spreadsheet as a JSON endpoint for several of my web projects for some time now. I liked this approach because I could retrieve data from a public spreadsheet without needing any kind of authentication or tokens to get the data, all I needed to do was publish the spreadsheet and then fetch from a simple URL:
fetch(`https://spreadsheets.google.com/feeds/${mode}/${id}/${sheetNum}/public/values?alt=json`).then((res)=>console.log(res));
Google is deprecating sheets v3, and I'm confused about how to migrate to v4. From this answer I gather that I need to provide an access token which is created via the google cloud console. But do I need to create some kind of special "app" or "workplace" or will any old API token do? I tried the following:
Create a GCP project
Enable Google Sheets API
Hit Create Credentials
fetch data using the following URL scheme:
fetch(https://sheets.googleapis.com/v4/spreadsheets/SPREADSHEET_ID/values/RANGE?key=API_KEY)
But this is giving me a 403 response.
You are using the JSON Alt Type variant of the Google Data protocol. This protocol is dated and appears to no longer work reliably. The GData API Directory tells:
Google Spreadsheets Data API: GData version is still live. Replaced by the Google Sheets API v4.
Google Sheets API v4 is a modern RESTful interface that is typically used with a client library to handle authentication and batch processing of data requests. If you do not want to do a full-blown client implementation, David Kutcher offers the following v4 analog for the GData JSON Alt Type, using jQuery:
GData (old API, not recommended):
var url = 'https://spreadsheets.google.com/feeds/list/' +
spreadsheet_id + '/' + tab_ordinal + '/public/values?alt=json';
($.getJSON(url, 'callback=?')).success(function(data) {
// ...
};
V4 (new API, recommended):
var url = 'https://sheets.googleapis.com/v4/spreadsheets/' +
spreadsheet_id + '/values/' + tab_name +
'?alt=json&key=' + api_key;
($.getJSON(url, 'callback=?')).success(function(data) {
// ...
};
...where:
spreadsheet_id is the long string of letters and numbers in the address of the spreadsheet — it is the bit between /d/ and /edit
tab_ordinal is number of the sheet — the first sheet that appears in the tab bar is sheet number 1, the second one is 2, and so on
tab_name is the name of the sheet, i.e., the name you see in the tab bar at the bottom of the window when you have the spreadsheet open for editing
api_key is the API key you get from from Google Cloud Platform console
Note that the JSON output format differs between the two versions.
The old GData JSON Alt Type variant API requires that the spreadsheet is made public through File > Publish to the web. V4 requires that the file is shared with "anyone with the link can view" through File > Share.
FINDINGS
The URL scheme produces the error 403 because mostly likely the spreadsheet file isn't shared publicly like this:
I can also replicate the 403 error when my test sheet isn't shared publicly using the same URL scheme:
RECOMMENDATION:
You can double check the spreadsheet file you're accessing and check it's sharing permission, making sure it's set to Anyone with the link:
TEST RESULT
Publicly shared test sheet
After setting up the spreadsheet file's sharing permission to Anyone with the link using the same v4 URL scheme:
I have a WordPress site and I am using a NPM package to call the Google Geocoding API from google and get the latitude and longitude from an address, it includes the API key and the address to look for. I had to un restrict my API key on my google console because I was getting an error when I was trying to do the call.
The package is here: https://www.npmjs.com/package/#google/maps
What I am trying to achieve is to restrict my API key to be used only on the site. Right now it is only restricted with Geocoding API, Javascript Maps API and Places API filters so it won't be used with any other kind of library.
I am only using the geocoding functionality on the site and nothing else so it doesn't make sense to have a Map, but I have the places and maps libraries active because on the WordPress admin I use them.
I tried the HTTP referrer restriction with the website domain name and IP address restriction with the server IP where the site is being hosted but none of these worked.
I have a googleClient object which handles the Geocoding API
let requested_address
googleClient.geocode({address: requested_address})
.asPromise()
.then((response) => {
// Call to another function passing the location object from response
showLocations(response.json.results[0].geometry.location)
})
.catch((err) => {
// print error message in screen
$('.results-message').show().html(err.json.error_message)
});
I get an error with this message:
API keys with referer restrictions cannot be used with this API.
I am trying to get a way to use this same package with the API Key restrictions so it is not used on other sites/apps or other way to get the location latitude and longitude, even if you just put a zip code or a non complete address as Google Geocoding does.
Good Day to you,
I have a difficulty in finding the google maps api key. I had to change the base_url in the config file and since then it gives me this error:
Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error_.ab # js?v=3.exp&signed_in=false&sensor=false&libraries=places&language=en-USA:32
util.js:211
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
util.js:211
Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
if i add this tag with my api key into the <head> of the page: <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
i get this error:
unfortunately i only have an img of the error right now.
first it was missing then it was duplicated. and why would it be missing if i change the config?i know that you have to get a new api key with the new domain and i did that but there is a conflict with the old api key which i cant find anywhere. where then would i find the original key? i tried searching in all the files couldnt find any key. does somebody have a hint for me? i tried searching all files for "googleapis.com". Maybe the there is an otherway to link to the google api of which i dont know. im really looking forward to get this fixed.
thank you for your time to read this and i hope someone can help me
regards
theweeezel
As the error stated :
The script element that loads the API is missing the required authentication parameter. If you are using the standard Maps JavaScript API, you must use a key parameter with a valid API key. If you are a Premium Plan customer, you must use either a client parameter with your client ID or a key parameter with a valid API key.
If you will check the guide to API keys and client IDs. Kindly double check the API Key created and follow the script tag below.
If you're using the API under the standard plan, you must use a browser key (a type of API key) set up in a project of your choice.
Specify a key when loading the API
To specify a key, include it as the value of a key parameter when loading the API.
For example:
NOTE:
Google Maps APIs are available for Android or iOS apps, Web browsers, and via HTTP web services. APIs in each platform require a specific type of key. The Google Maps JavaScript API will only work with a Browser key. APIs of the same platform can use the same key.
Hope this helps.
So basically I'm trying to learn more about iOS development and APIs, so I'm building an iOS app that allows people to search a zipcode and then it will return all of the restaurants currently open within a certain radius. I got the Google Maps API setup properly, but I'm running into issues with how to get that info.
I looked at the Google Places API and it looks like I will be able to get a JSON result and then I can just look for the "open_now" : true key/value. Currently, there is a Google Places API for Android and Javascript, but the iOS one is still in beta. Can I use this Javascript API to pass the JSON into my Obj-C code for iOS Development? Thanks!
To use the Google Places API make a simple POST request with AFNetworking
For example:
AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager];
NSDictionary *parameters = #{#"key": #"YOUR_KEY", #"location": #"YOUR_LOCATION"};
[manager POST:#"https://maps.googleapis.com/maps/api/place/nearbysearch/" parameters:parameters success:^(AFHTTPRequestOperation *operation, id responseObject) {
NSLog(#"JSON: %#", responseObject);
} failure:^(AFHTTPRequestOperation *operation, NSError *error) {
NSLog(#"Error: %#", error);
}];
Now with the json "responseObject" you can do anything
Try to parse it with json-framework
You're probably looking for info on how to parse JSON with Objective-C:
How do I parse JSON with Objective-C?
In a nutshell, use the NSJSONSerialization class to convert JSON to Foundation objects and Foundation objects to JSON.
You don't need the javascript API for that task. The Google Places API belongs to the Google Maps Web service suite, so you just need to make a http request in order to retreive the data.
Making http requests on obj-c is addressed in here and you'll just need to parse the JSON response.
I am using YT API to fetch video description. I can use older API to fetch complete description of video using api call like this: API CALL
But using the newer API call truncates the description after 160 characters. example: https://www.googleapis.com/youtube/v3/videos?id=7lCDEYXw3mM&key=API_KEY_HERE&part=snippet&fields=items(snippet(title,description,categoryId))
Any idea about how I can get full description of a video from googleapis and not gdata.youtube(it is truncated).
I think you've confused things a bit with the request URLs you posted, as they are retrieving different types of data. Basically, with a search request (whether the search feed in the old V2 API that you've posted, or the search endpoint in the new V3 API which you didn't post an example of) will always return truncated descriptions. A videos request (which you have an example of for V3 but not for V2) will return the full video description. This is true for v2 or v3.