Google Maps API: Populate Google Maps based on TextBox using JavaScript

Last Reply 12 days ago By dharmendr

Posted 12 days ago

hello,

i am using this snippet it works fine on textbox change event.

function-not-firing

if textbox already has value so it does not show map so i want to work this on both scenerio

1. if texbox already has some value so it shows map if post code is correct

2. if user change the post code so show new map.

please advice

Posted 12 days ago Modified on 4 days ago

Hi nauna,

Refer below sample code.

HTML

Master Page

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=API_KEY"></script>
    <script type="text/javascript">
        function DrawMap(ele) {
            var geocoder = new google.maps.Geocoder();
            var address = document.getElementById(ele).value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0].types[0] == 'postal_code') {
                        var latitude = results[0].geometry.location.lat();
                        var longitude = results[0].geometry.location.lng();
                        var data = {};
                        data.title = results[0].formatted_address;
                        data.lat = latitude;
                        data.lng = longitude;
                        var mapOptions = { center: new google.maps.LatLng(latitude, longitude), zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP };
                        var infoWindow = new google.maps.InfoWindow();
                        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                        var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title });
                        (function (marker, data) {
                            google.maps.event.addListener(marker, "click", function (e) {
                                infoWindow.setContent("<div style = 'width:200px;height:50px'>" + data.title + "</div>");
                                infoWindow.open(map, marker);
                            });
                        })(marker, data);
                        document.getElementById("dvMap").style.display = "block";
                    } else {
                        document.getElementById("dvMap").style.display = "none";
                        alert("Your post code is not correct.\nPlease update your correct postcode.");
                    }
                } else {
                    document.getElementById("dvMap").style.display = "none";
                    alert("Your post code is not correct.\nPlease update your correct postcode.");
                }
            });
        };
    </script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Content Page

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript">
        window.onload = function () {
            DrawMap('<%=TextBox2.ClientID%>');
        }
    </script>
    <asp:TextBox ID="TextBox2" runat="server" Text="400093"></asp:TextBox>
    <br />
    <asp:LinkButton ID="LinkButton1" Text="Show Map" runat="server" />
    <br />
    <div id="dvMap" style="width: 300px; height: 400px">
    </div>
</asp:Content>

Code

Default.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    // Uncomment if want to use TextBox change event.
    //TextBox2.Attributes.Add("onchange", "DrawMap('" + TextBox2.ClientID + "');");
    LinkButton1.OnClientClick = "DrawMap('" + TextBox2.ClientID + "');return false;";
}

Default.aspx.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    'Uncomment if want to use TextBox change event.
    'TextBox2.Attributes.Add("onchange", "DrawMap('" & TextBox2.ClientID & "');")
    LinkButton1.OnClientClick = "DrawMap('" & TextBox2.ClientID & "');return false;"
End Sub

Screenshot