0

I followed the steps to solve the problem of Transliteration API not being served over HTTPS: Javascript google transliterate API not served over https

I extracted Google JSAPI & Transliteration.I.js to my own file and added https.

But After that, the suggestions pop up in a div at the bottom of the page and not like the usual dropdown.

Would appreciate some help.

Varun Joshi
  • 599
  • 2
  • 9
  • 24

1 Answers1

2

Here is a step by step process:

First, there's a link to API:

<script type="text/javascript" src="https://www.google.com/jsapi">

Second, Visit the API link above and search the contents as given below:

google.loader.ServiceBase = 'https://www.google.com/uds';

You need to replace the link of google.loader.ServiceBase = 'yourfile.js';

note: yourfile.js is a script created by you.

And to do that - you need to create two separate JavaScript files. Why? because the google.loader.ServiceBase is inside google.com/jsapi

step 1: Create two JavaScript files - lets say main.js and extra.js

step 2: save the contents of https://www.google.com/jsapi to main.js

step 3: save the contents of https://www.google.com/uds/api/elements/1.0/7ded0ef8ee68924d96a6f6b19df266a8/transliteration.I.js to extra.js

step 4: In extra.js - find qi="http://www.google.com" and replace with qi="https://www.google.com" - remember http is changed to https and save it.

step 5: Now back to main.js - you have to find the google.loader.ServiceBase = 'https://www.google.com/uds'; and replace with google.loader.ServiceBase = 'extra.js'; and save it.

step 6: Call both the files in your index.html.

<script type="text/javascript" src="main.js">
<script type="text/javascript" src="extra.js">

step 7: Copy CSS from this link & add it to a file transliteration.css. Add the following line to index.html

<link type="text/css" href="assets/google/js/transliteration.css" rel="stylesheet"/>

This should get you the correct CSS required for showing the transliteration popup.

Varun Joshi
  • 599
  • 2
  • 9
  • 24