Click here to Skip to main content
15,071,262 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
In the following code I am able to get the map for manually inserted latitude and longtitude with an API key for localhost. Now if I use that code in my website, the location selected by the user will change. In such circumstances how to pass the details pertaining to latitude
and longtitude to 'var myLatlng'.
C#
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show or Integrate Google Maps in asp.net webapplication</title>
<style type="text/css">
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCN_Tua6KFZaZKJW1VXFaSJfrMT9P9SB0A&sensor=true">
</script>
<script type="text/javascript">
function initialize() {

var myLatlng= new google.maps.LatLng(22.00, 76.96)

var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
marker:true
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
}
</script>

</head>
<body  önload="initialize()">
<form id="form1"  runat="server">
<div id="map_canvas" style="width: 500px;  removed600px; removed400px; height: 300px"></div>
</form>
</body>
</html>
Posted
Updated 14-Aug-13 20:53pm
v3

Hi ,

Firstly i suggest if you have limited locations then go and create table which will hold following things. you can modify columns depending on your need.

C#
public class Location
      {
          public int Id { get; set; }
          public double Latitude { get; set; }
          public double Longitude { get; set; }
          public string LocationName { get; set; }
          public string CompleteGeoLocation { get; set; }
      }


Add below code in page_load method

protected void Page_Load(object sender, EventArgs e)
       {

           // Create database for location with Latitude and Longitude
           // Using worldatlas.com or any other wensite which will provide accurate Latitude and Longitude.

           if (!IsPostBack)
           {
               List<Location> locationCollection = new List<Location> {
               new Location {Id=1,Latitude=18.31,Longitude=73.71,LocationName="Pune",CompleteGeoLocation="18.31,73.71"},
               new Location {Id=2,Latitude=51.30,Longitude=0.7,LocationName="London",CompleteGeoLocation="51.30,0.7"},
               new Location {Id=3,Latitude=35.41,Longitude=139.41,LocationName="Tokyo",CompleteGeoLocation="35.41,139.41"},
               new Location {Id=4,Latitude=42.36,Longitude=83.8,LocationName="Troy",CompleteGeoLocation="42.36,83.8"},

               };

               ddlLocation.DataSource = locationCollection;
               ddlLocation.DataValueField = "CompleteGeoLocation";
               ddlLocation.DataTextField = "LocationName";
               ddlLocation.DataBind();
           }


       }



Below is the aspx code. Please add your own apiKey

HTML
<html>
  <head id="Head1" runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #mapcanvas { height: 50% }
    </style>
    <script type="text/javascript">
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-0MJH3LspBYtFwfnWT7icqWzRs3bsds_uE4&sensor=true">
    </script>
    <script type="text/javascript">

    //modified initialization method which will work on dropdown index
        function initialize() {
            if (document.getElementById("ddlLocation").selectedIndex != -1) 
            {

                var data = document.getElementById("ddlLocation").value.split(',');
                var Latitude = parseFloat(data[0]);
                var Longitude = parseFloat(data[1]);
                var mapOptions = {
                    center: new google.maps.LatLng(Latitude, Longitude),
                    zoom: 8,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("mapcanvas"),
            mapOptions);
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
   <form id="form1" style="height:750px" runat="server">
   <div id="mapcanvas" style="width:50%" runat="server" clientidmode="Static" />
     <div>
     <asp:dropdownlist id="ddlLocation" runat="server" width="200px" autopostback="true" xmlns:asp="#unknown">
        Enabled="True" ></asp:dropdownlist>
   </div>
    </form>
  </body>
</html>


after this on first load html will dislpay first location from location drop down.
later you can change location on selection dropdown location change.
   
Comments
S.Rajendran from Coimbatore 15-Aug-13 5:01am
   
How to pass on the details on lat and long to a table?
basavrajmswami 15-Aug-13 5:10am
   
ok you need to manually create this database for location you want
use below link enter location and get details of lat and long
http://www.worldatlas.com/aatlas/findlatlong.htm
basavrajmswami 15-Aug-13 5:14am
   
Or you can use yahoo service http://developer.yahoo.com/maps/rest/V1/geocode.html for creating database
basavrajmswami 15-Aug-13 5:15am
   
http://deepumi.wordpress.com/2010/03/14/yahoo-geocoding-api-service-in-asp-net-3-5-c-using-webclient-asynchronously/
Use below html code add your own apikey
Now in this solution you can type address of location and click on encode this will load specific location.


HTML
<html>
  <head id="Head1" runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #mapcanvas { height: 50% }
    </style>
    <script type="text/javascript">
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-0MJH3LspBYtFwfnWT7icqddWzRs3b_uE4&sensor=true">
    </script>
    <script type="text/javascript">
    var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("mapcanvas"), mapOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").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);
      }
    });
  }

    </script>
  </head>
  <body onload="initialize()">
   <form id="form1" style="height:750px" runat="server">
   <div id="mapcanvas" style="width:50%" runat="server" clientidmode="Static" />
   <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </input></input></div>
     
    </form>
  </body>
</html>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900