how to obtain and pass latitude and longtitude details in code for google maps

Question

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 14-Aug-13 19:37pm

S.Rajendran from Coimbatore

Updated 14-Aug-13 20:53pm

ridoy

v3

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

basavrajmswami · Answer 1 · 2013-08-14T21:53:00

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.

basavrajmswami · Answer 2 · 2013-08-14T23:33:00

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>

how to obtain and pass latitude and longtitude details in code for google maps

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0