jQuery getJSON() not working with Google maps api

Question

I am new to both JSON & google maps. SO please tell me what I am missing

   <!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.15&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

    $function({
    $("#search").click(function(){
        $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=awan%20town&sensor=false",function(result){
            $.each(result,function(i,field){
                $("#map-canvas").append(field + " " );
            });
        });
    });
}); 



</script>
</head>
<body>

<button  id="search">Search</button>
<div id="map-canvas" style="width:100%;height:100%;"></div>
</body>
</html>

Felix · Accepted Answer · 2014-03-30 16:29:58Z

1

Try to wrap your code inside DOM ready handler $(function() {...}); to make sure all of your DOM elements have been loaded properly before executing your jQuery code:

$(function () {
    $("#search").click(function () {
        $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=awan%20town&sensor=false", function (result) {
            $.each(result, function (i, field) {
                $.("#map-canvas").append(field + " ");
            });
        });
    });
});

You also need to change:

$.("#search")
$.("#map-canvas")

to:

$("#search")
$("#map-canvas")

You don't need the . before selector here.

answered Mar 30, 2014 at 16:29

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Felix Over a year ago

What fields that you want to get from the returned JSON?

Muhammad Arslan Jamshaid Over a year ago

I guess the code I wrote would return all from this URL, I actually want to get any specific field how to do that maps.googleapis.com/maps/api/geocode/…

Felix Over a year ago

I'd suggest you to take a basic tutorial about JSON to understand better about how JSON works.

Muhammad Arslan Jamshaid Over a year ago

I did on w3school but for now if you just correct my code say I want to access formatted_address how I do that?

Collectives™ on Stack Overflow

jQuery getJSON() not working with Google maps api

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related