How to make Google map with to and from text boxes in asp.net

Question

This code is showing auto complete addresses, but I want to show them on a map.
I want to add Google maps on my asp.net page by taking the From and To address from the auto complete text boxes.

Please Help me.

<script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
            var places2 = new google.maps.places.Autocomplete(document.getElementById('txtPlaces2'));
            google.maps.event.addListener(places,places2, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.k;
                var longitude = place.geometry.location.D;
                var mesg = "Address: " + address;
                mesg += "\nLatitude: " + latitude;
                mesg += "\nLongitude: " + longitude;
               // alert(mesg);
            });
        });
       
</script>

<span>Location 1:</span>
<input type="text" id="txtPlaces" style="width: 250px" /><br /><br />
<span>Location 2:</span>
<input type="text" id="txtPlaces2" style="width: 250px" />

show some code buddy!! what you have tried??? – Guruprasad J Rao Apr 15 '15 at 07:04 — Guruprasad J Rao, Apr 15 '15 at 07:04

jmgross · Accepted Answer · 2015-04-15T08:24:21.370

0

Your addListener call seems to be invalid. The second argument have to be the event, and here you pass a dom element. So I suggest the following change (without testing by me) :

var from = null;
var to = null;

google.maps.event.addListener(places, 'place_changed', function() {
    from = places.getPlace();
});
google.maps.event.addListener(places2, 'place_changed', function() {
    to = places2.getPlace();
});

document.getElementById("submit").addEventListener("click", function() {
    if(from == null) {
        alert("You have to select an origin");
    } else {
        if(to == null) {
            alert("You have to select a destination");
        } else {
            var start = from.geometry.location;
            var end = to.geometry.location;
            //Render the direction
        }
    }
});

edited Apr 15 '15 at 08:24

answered Apr 15 '15 at 07:22

jmgross

2,306
1
20
24

would you please help me to draw route from first address to 2nd on Google map using lat,long from text boxes i have – ARC Apr 15 '15 at 07:34
do you want direction instruction or just the route ? – jmgross Apr 15 '15 at 07:46
just route using lat long that are in my text boxes – ARC Apr 15 '15 at 07:50
there is already a post on SO : [http://stackoverflow.com/q/5959788/4682796](http://stackoverflow.com/q/5959788/4682796) – jmgross Apr 15 '15 at 07:53
Is there any way to restrict user not to enter address unless Google suggestions in auto complete text boxes.This is my problem – ARC Apr 15 '15 at 08:07
You can use two javascript variables (_from_ and _to_ places) you will init with your `onPlaceChange` function. Then on your submit button you check if your two variables are initialized and then you will only use the direction script with those variables. – jmgross Apr 15 '15 at 08:11
I don't have any button , i want to alert when address is selected from suggestion list or when is not selected or entered anything irrelevent – ARC Apr 15 '15 at 08:51

score 0 · Answer 2 · answered Apr 15 '15 at 07:26

Check this autocomplete gmap example with its javascript and html codes. You can easily change them with asp net tools if you wish. Also this autocomplete example fills the adress form. This is the documentation for auto compete for google map. You can understand how properties work.I recommend you to go with google's examples.

score 0 · Answer 3 · answered Apr 15 '15 at 07:29

         <html xmlns="http://www.w3.org/1999/xhtml">

           <body>
           <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>


           <script type="text/javascript">
             google.maps.event.addDomListener(window, 'load', function () {
             var places = new google.maps.places.Autocomplete(document.getElementById('txtfromaddress'));
             google.maps.event.addListener(places, 'place_changed', function () {
             var place = places.getPlace();
             var address = place.formatted_address;
             var latitude = place.geometry.location.k;
             var longitude = place.geometry.location.D;
             var mesg = "Address: " + address;
             mesg += "\nLatitude: " + latitude;
             mesg += "\nLongitude: " + longitude;
             alert(mesg);
             });
             });
          </script>

            <script type="text/javascript">
              google.maps.event.addDomListener(window, 'load', function () {
              var places = new google.maps.places.Autocomplete(document.getElementById('txttoaddress'));
              google.maps.event.addListener(places, 'place_changed', function () {
              var place = places.getPlace();
              var address = place.formatted_address;
              var latitude = place.geometry.location.k;
              var longitude = place.geometry.location.D;
              var mesg = "Address: " + address;
              mesg += "\nLatitude: " + latitude;
              mesg += "\nLongitude: " + longitude;
              alert(mesg);
              });
              });
           </script>
    <asp:Label id="lblfromaddress " runat="server"></asp:Label>
  <asp:TextBox id="txtfromaddress"  Runat="server" ></asp:TextBox>

  <asp:Label id="lbltoaddress " runat="server"></asp:Label>
  <asp:TextBox id="txttoaddress"  Runat="server" ></asp:TextBox>

In the code behind use (C#):

lblfromaddress .Text = "From adddress";

lbltoaddress .Text = "To adddress";

How to make Google map with to and from text boxes in asp.net

3 Answers3