CODEWITHSUNDEEP
javascriptjquery
user609306
user609306

Reputation: 1371

basic javascript jquery json api

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>

Upvotes: 0

Views: 398

Answers (1)

user1986444
user1986444

Reputation: 31

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;



});
});

});

Upvotes: 1

Related Questions