How to Pass address to google map in asp? RSS

• • Reply
  

  wangxg26

  Member

  77 Points

  193 Posts

  How to Pass address to google map in asp?

  Jan 26, 2013 12:20 AM|LINK

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script language="javascript" type="text/javascript">
  
      var map;
      var geocoder;
      function InitializeMap() {
  
          var latlng = new google.maps.LatLng(-34.397, 150.644);
          var myOptions =
          {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              //disableDefaultUI: true
          };
          map = new google.maps.Map(document.getElementById("map"), myOptions);
      }
  
      function FindLocaiton() {
          geocoder = new google.maps.Geocoder();
          InitializeMap();
  
          
          var txtAddress = document.getElementById("<%=txtAddress.ClientID %>");
          var address = txtAddress.value;
          geocoder.geocode({ 'address': address }, function (results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                  map.setCenter(results[0].geometry.location);
                  var marker = new google.maps.Marker({
                      map: map,
                      position: results[0].geometry.location
                  });
  
              }
              else {
                  alert("Geocode was not successful for the following reason: " + status);
              }
          });
  
      }
  
      function showAddress() {
          geocoder = new google.maps.Geocoder();
          initialize()
          var txtAddress = document.getElementById("<%=txtAddress.ClientID %>");
          var address = txtAddress.value;
  
          geocoder.getLatLng(
                  address,
                  function (point) {
                      if (!point) {
                          alert(address + " not found");
                      }
                      else {
                          map.setCenter(point, 15);
                          var marker = new GMarker(point);
                          map.addOverlay(marker);
                          marker.openInfoWindow(address);
                      }
                  }
              );
      }
  
      //function Button1_onclick() {
       //   FindLocaiton();
      }
  
      window.onload = InitializeMap;
  
  </script>
  
  <h2>Gecoding Demo JavaScript: </h2>
  <table>
  <tr>
  <td>
  
      <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
      
  </td>
  <td>
      <input id="Button1" type="button" value="Find" onclick="return FindLocaiton()" /></td>
  </tr>
  <tr>
  <td colspan ="2">
  <div id="map" style="width: 350px; height: 300px"></div>
  </td>
  </tr>
  </table>

  • Moved by XIII on Jan 28, 2013 08:50 AM
• • Reply
  

  Rion William...

  All-Star

  27716 Points

  4574 Posts

  Re: How to Pass address to google map in asp?

  Jan 26, 2013 01:25 AM|LINK

  What kind of issues are you encountering or what isn't working? Currently, you are basically just using Javascript to handle all of this. You could just replace your Textbox with an <input> element as follows :

  <--Replace the following line -->
  <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
  <-- with this line -->
  <input id='txtAddress' />

  and then you would just need to change the same reference in your Javascript :

  var txtAddress = document.getElementById("txtAddress");

  You also had an additional unclosed bracket that wasn't commented out properly : 

  //The } line was not commented previously
  //function Button1_onclick() {
  //   FindLocaiton();
  //    }

  Full Working Example (Full code below)

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script language="javascript" type="text/javascript">
  
      var map;
      var geocoder;
      function InitializeMap() {
  
          var latlng = new google.maps.LatLng(-34.397, 150.644);
          var myOptions =
          {
              zoom: 8,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              //disableDefaultUI: true
          };
          map = new google.maps.Map(document.getElementById("map"), myOptions);
      }
  
      function FindLocaiton() {
          geocoder = new google.maps.Geocoder();
          InitializeMap();
  
          
          var txtAddress = document.getElementById("txtAddress");
          var address = txtAddress.value;
          geocoder.geocode({ 'address': address }, function (results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                  map.setCenter(results[0].geometry.location);
                  var marker = new google.maps.Marker({
                      map: map,
                      position: results[0].geometry.location
                  });
  
              }
              else {
                  alert("Geocode was not successful for the following reason: " + status);
              }
          });
  
      }
  
      function showAddress() {
          geocoder = new google.maps.Geocoder();
          initialize()
          var txtAddress = document.getElementById("txtAddress");
          var address = txtAddress.value;
  
          geocoder.getLatLng(
                  address,
                  function (point) {
                      if (!point) {
                          alert(address + " not found");
                      }
                      else {
                          map.setCenter(point, 15);
                          var marker = new GMarker(point);
                          map.addOverlay(marker);
                          marker.openInfoWindow(address);
                      }
                  }
              );
      }
  
      //function Button1_onclick() {
      //   FindLocaiton();
      //}
  
      window.onload = InitializeMap;
  
  </script>
  
  <h2>Gecoding Demo JavaScript: </h2>
  <table>
  <tr>
  <td>
  <input id='txtAddress' />
  </td>
  <td>
      <input id="Button1" type="button" value="Find" onclick="return FindLocaiton()" /></td>
  </tr>
  <tr>
  <td colspan ="2">
  <div id="map" style="width: 350px; height: 300px"></div>
  </td>
  </tr>
  </table>

  If you want to use .NET specifically, you may want to take a look into the Google Maps API wrapper for ASP.Net :

  Google Maps .NET API

  
   

  Blog | Twitter | Stack Overflow | LinkedIn
  • Edited by Rion Williams on Jan 26, 2013 02:06 AM
• • Reply
  

  wangxg26

  Member

  77 Points

  193 Posts

  Re: How to Pass address to google map in asp?

  Jan 26, 2013 02:57 AM|LINK

  I'm beginner with this application. another question: In the following code, how can I pass a "real" address to it. like 3435 street,  New York NY

  <input id='txtAddress' />.

   

• • Reply
  

  Rion William...

  All-Star

  27716 Points

  4574 Posts

  Re: How to Pass address to google map in asp?

  Jan 26, 2013 02:36 PM|LINK

  If you are going to use something like this :

  <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>

  You should be able to reference your Textbox control in your code-behind (your .cs page) within your Page Load event like this :

  TxtAddress.Text = "Your Address Here";

  
  
  

  Blog | Twitter | Stack Overflow | LinkedIn
  • Edited by decker dong - msft on Feb 04, 2013 03:34 AM
  • Edited by decker dong - msft on Feb 04, 2013 03:34 AM