CODEWITHSUNDEEP
jqueryjsongoogle-maps-api-3
Muhammad Arslan Jamshaid
Muhammad Arslan Jamshaid

Reputation: 1197

jQuery getJSON() not working with Google maps api

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>

Upvotes: 0

Views: 1100

Answers (1)

Felix
Felix

Reputation: 38102

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.

Upvotes: 1

Related Questions