Google Map API Add marker based on searched address and display complete address in infoWindow using JavaScript in ASP.Net

Last Reply on Aug 29, 2017 02:13 AM By dharmendr

Posted on Aug 28, 2017 04:23 AM

Hello Sir/Mam,

 

i have  literal  control on my aspx page 

 

<asp:literal runat="server" id="ltliFrame" />

i ambinding it from code behind like bellow

 

  Dim url1 As String = "http://www.mapi.ie/create-google-map/map.php?width=100%&amp;height=300&amp;hl=en&amp;q=" +some address + "&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=A&amp;output=embed"
                        ltliFrame.Text = "<iframe id=""mymap"" runat=""server"" src=" + url1 + " width=""100%"" height=""300"" frameborder=""0"" scrolling=""no"" marginheight=""0"" marginwidth=""0""></iframe>"

this is working fine but i wants to add some text as Title

 

my iframe display like  

http://www.propcapitalrealty.in/img/1.png

and i wants to show like 

http://www.propcapitalrealty.in/img/2.png

 

Posted on Aug 28, 2017 04:23 AM
Hi @yogeshc,
Please try the following

Dynamically Add Column to database Table from code behind in C# .Net

It might help you.

Cheers Andrea.


Posted on Aug 29, 2017 02:13 AM Modified on on Aug 29, 2017 03:26 AM

Hi yogeshc,

Refer the below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCI2rrQ6FeYu6JvfehofKYLLKxkDxem78o"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=btnSearch]").bind("click", function () {
                GetLocation($("#txtAddress").val());
                return false;
            });
        });
        function GetLocation(address) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var location = {};
                    location.lattitude = results[0].geometry.location.lat();
                    location.longitude = results[0].geometry.location.lng();
                    location.address = results[0].formatted_address;
                    var mapOptions = {
                        center: new google.maps.LatLng(location.lattitude, location.longitude),
                        zoom: 17,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var infoWindow = new google.maps.InfoWindow();
                    var latlngbounds = new google.maps.LatLngBounds();
                    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                    var myLatLng = new google.maps.LatLng(location.lattitude, location.longitude);
                    var marker = new google.maps.Marker({ position: myLatLng, map: map });
                    google.maps.event.addListener(marker, "click", function (e) {
                        //var location = e.latLng;
                        infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + location.address + "</div>");
                        infoWindow.open(map, marker);
                    });

                }
            });
        };    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="text" id="txtAddress" value="" />
    <input type="button" id="btnSearch" value="Search" />
    <hr />
    <div id="dvMap" style="height: 600px; width: 600px">
    </div>
    </form>
</body>
</html>

Demo

If you want complete address then refer the below code.

For this download the Geocoding dll from the below link and add the reference in your project.

Geocoding.dll v3.6.0

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCI2rrQ6FeYu6JvfehofKYLLKxkDxem78o"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=btnSearch]").bind("click", function () {
                GetLocation($("#txtAddress").val());
                return false;
            });
        });
        function GetLocation(address) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var location = {};
                    location.lattitude = results[0].geometry.location.lat();
                    location.longitude = results[0].geometry.location.lng();
                    location.address = results[0].formatted_address;
                    var mapOptions = { center: new google.maps.LatLng(location.lattitude, location.longitude), zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP };
                    var infoWindow = new google.maps.InfoWindow();
                    var latlngbounds = new google.maps.LatLngBounds();
                    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                    var myLatLng = new google.maps.LatLng(location.lattitude, location.longitude);
                    var marker = new google.maps.Marker({ position: myLatLng, map: map });
                    google.maps.event.addListener(marker, "click", function (e) {
                        //var location = e.latLng;
                        $.ajax({
                            type: "POST",
                            url: "Default.aspx/GetAddress",
                            data: '{lat:"' + location.lattitude + '",lng:"' + location.longitude + '"}',
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (response) {
                                infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + response.d + "</div>");
                                infoWindow.open(map, marker);
                            },
                            error: function (r) {
                                alert(response.responseText);
                            }
                        });
                    });
                }
            });
        };    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="text" id="txtAddress" value="" />
    <input type="button" id="btnSearch" value="Search" />
    <hr />
    <div id="dvMap" style="height: 300px; width: 300px">
    </div>
    </form>
</body>
</html>

C#

[System.Web.Services.WebMethod]
public static string GetAddress(string lat, string lng)
{
    IGeocoder geocoder = new GoogleGeocoder(ConfigurationManager.AppSettings["APIKey"]);
    IEnumerable<Address> addresses = geocoder.ReverseGeocode(Convert.ToDouble(lat), Convert.ToDouble(lng));
    return ((Geocoding.Google.GoogleAddress[])(addresses))[0].FormattedAddress;
}

Namespace

using Geocoding;
using Geocoding.Google;
using System.Configuration;
using System.Web.Services;

Screenshot