Set Google script API key from database using C#, VB.Net and JavaScript in ASP.Net

Hi nauna,

In order to set API key from database you need to dynamically add the script tag to the page head.

First declare a protected variable in code behind and set the value from database in page load.

Then access the variable in JavaScript and set the key in the script tag and add the script to page head section.

Check this example. Now please take its reference and correct your code.

HTML

C#

<asp:TextBox ID="txtLocation" runat="server" Width="200px" />
<script type="text/javascript">
    AddScript('<%=this.Key%>');

    function AddScript(key) {
        var script = document.createElement('script');
        script.src = "https://maps.googleapis.com/maps/api/js?libraries=places&key=" + key;
        script.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    window.onload = function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('<%=txtLocation.ClientID%>'));
        google.maps.event.addListener(places, 'place_changed', function () {
            var place = places.getPlace();
            var address = place.formatted_address;
            var latitude = place.geometry.location.lat();
            var longitude = place.geometry.location.lng();
            var mesg = "Address: " + address;
            mesg += "\nLatitude: " + latitude;
            mesg += "\nLongitude: " + longitude;
            alert(mesg);
        });
    }
</script>

VB.Net

<asp:TextBox ID="txtLocation" runat="server" Width="200px" />
<script type="text/javascript">
    AddScript('<%=Me.Key%>');

    function AddScript(key) {
        var script = document.createElement('script');
        script.src = "https://maps.googleapis.com/maps/api/js?libraries=places&key=" + key;
        script.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    window.onload = function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('<%=txtLocation.ClientID%>'));
        google.maps.event.addListener(places, 'place_changed', function () {
            var place = places.getPlace();
            var address = place.formatted_address;
            var latitude = place.geometry.location.lat();
            var longitude = place.geometry.location.lng();
            var mesg = "Address: " + address;
            mesg += "\nLatitude: " + latitude;
            mesg += "\nLongitude: " + longitude;
            alert(mesg);
        });
    }
</script>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected string Key = "";
protected void Page_Load(object sender, EventArgs e)
{
    this.Key = GetAPIKey();
}

private string GetAPIKey()
{
    string apiKey = "";
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.Connection = con;
            cmd.CommandText = "SELECT Value FROM Keys WHERE Key = 'GoogleAPI'";
            cmd.CommandType = CommandType.Text;
            con.Open();
            apiKey = Convert.ToString(cmd.ExecuteScalar());
            con.Close();
        }
    }

    return apiKey;
}

VB.Net

Protected Key As String = ""
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Me.Key = GetAPIKey()
End Sub

Private Function GetAPIKey() As String
    Dim apiKey As String = ""
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(conString)
        Using cmd As SqlCommand = New SqlCommand()
            cmd.Connection = con
            cmd.CommandText = "SELECT Value FROM Keys WHERE Key = 'GoogleAPI'"
            cmd.CommandType = CommandType.Text
            con.Open()
            apiKey = Convert.ToString(cmd.ExecuteScalar())
            con.Close()
        End Using
    End Using

    Return apiKey
End Function

Screenshot