basic javascript jquery json api

Question

i have the following code which doesn't work. I don't know how to integrate Jquery and javascript in same file when they are accessing same variable.....like here latitude1 and longitude1 are two variable which has to be used by both. Please help to make it work

<!DOCTYPE html>
<html>
  <head>
    <title>Place searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script>


    var latitude1, longitude1;


$(document).ready(function () {

  $(":button").click(function(){

     var add = $("#destination").val();

    $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address= + add +&sensor=false", function (data) {


           var latitude1 =  data.results[0].geometry.location.lat; 
           vat longitude1 = data.results[0].geometry.location.lng;



    });
    });
});

var map;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(latitude1, longitude1);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: pyrmont,
    zoom: 15
  });

  var request = {
    location: pyrmont,
    radius: 500,
    types: ['store']
  };
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

  </script>
  </head>
  <body> 
  <input type="text"  id="destination" /><button type="button">Search</button><br>
    <div id="map-canvas" style="width: 50%; float:left"></div>
    <div style="width:46%; float:left">
   </body>
</html>

Cherniv is correct, fix the typo and it should work. Try using something like FireBug, its great for pointing things like this out... — NeilA
– NeilA, Commented Aug 4, 2013 at 8:21

user1986444 · Accepted Answer · 2013-08-04 08:16:58Z

1

if you write var you define the variable again so drop the var

$(document).ready(function () {

$(":button").click(function(){

 var add = $("#destination").val();

$.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address= + add +&sensor=false", function (data) {


      latitude1 =  data.results[0].geometry.location.lat; 
      longitude1 = data.results[0].geometry.location.lng;



});
});

});

answered Aug 4, 2013 at 8:16

user1986444

313 bronze badges

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

Collectives™ on Stack Overflow

basic javascript jquery json api

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related