How to get longitude and latitude of a city/country inputted through an input box?

Question

I have this code,

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function myIP(){
$("#btn").click(function(){
            var geocoder =  new google.maps.Geocoder();
    geocoder.geocode( { 'address': '#city'}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            alert("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng()); 
          } else {
            alert("Something got wrong " + status);
          }
        });
});
}
 </script>
</head>
<body onload="myIP()">
<input type="text" id= "city">
<input id="btn" type="button" value="get Lat&Long" />
</body>
</html>

This will give me latitude and longitude of the inputted city in small dialog box. But I need this in the same page or parent page. Please help me

Is this your own code? In which case, what have you attempted? — Andy G, Aug 25 '13 at 17:21
not my code. I tried to input it through php input form in vain. — phpbeg, Aug 25 '13 at 17:28
When I attempt to use this, I get the same coordinates no matter what I put in. — Jeremy Johnson, Aug 25 '13 at 17:30
geocoder.geocode( { 'address': '#city'} . You are putting #city where you should put the input which is $('#city').val() — Alkis Kalogeris, Aug 25 '13 at 17:32
@phpbeg the suggestion @alkis mentioned did the trick when I tried it. The first parameter in `geocoder.geocode()` should be `{ 'address': $('#city').val()}` — Suvi Vignarajah, Aug 26 '13 at 19:07
can you help me with a complete code, because when i tried it was not working — phpbeg, Aug 26 '13 at 19:45

Alkis Kalogeris · Accepted Answer · 2013-08-27T05:46:20.130

6

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function myIP(){
$("#btn").click(function(){

            var geocoder =  new google.maps.Geocoder();
    geocoder.geocode( { 'address': $('#city').val()}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            $('.push-down').text("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng()); 
          } else {
            $('.push-down').text("Something got wrong " + status);
          }
        });
});
}
 </script>
  <style>
    .push-down {margin-top: 25px;}</style>
</head>
<body onload="myIP()">
<input type="text" id= "city">
<input id="btn" type="button" value="get Lat&Long" />
  <div class="push-down"></div>
</body>
</html>

edited Aug 27 '13 at 05:46

answered Aug 26 '13 at 21:21

Alkis Kalogeris

17,044
15
59
113

But that code is still not working for me. Is there anything I need to add from my end. – phpbeg Aug 27 '13 at 05:22
What do you mean "is not working"? Are there any errors? What does the console of your browser say? – Alkis Kalogeris Aug 27 '13 at 05:31
I am very sorry that was a mistake from my end. It is working perfectly. But can you help me with getting the result in a page rather than in dialogue popup box. – phpbeg Aug 27 '13 at 05:37
I updated the code to show the message a little below the input. You saild "a page" so I chose the same page. Please don't forget to accept the answer if this solves your problem. – Alkis Kalogeris Aug 27 '13 at 05:47
Sure I will accept it, thanks a lot alkis, it's working perfectly. – phpbeg Aug 27 '13 at 05:55
Thanks so much. It was very handy. I created a jsfiddle http://jsfiddle.net/Bl_praveen2004/eg52f49h/ – B L Praveen Aug 22 '14 at 06:43
Could the API have changed requirements? This is no longer working for me locally nor on the jsfiddle: 'REQUEST_DENIED` error. – Claudio Paladini Jun 07 '22 at 07:24

score 0 · Answer 2 · answered Apr 25 '16 at 11:17

$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + Loc + '&sensor=false', null, function (data) {
                var p = data.results[0].geometry.location
                var latlng = new google.maps.LatLng(p.lat, p.lng);                    
            });

How to get longitude and latitude of a city/country inputted through an input box?

2 Answers2

Linked