title: Google maps "Nearby search" callback function not getting invoked in phonegap
body: <p>I have integrated Google maps in my phonegap application to search nearby places (restaurant).</p>
  
  <p><strong>But the callback function never gets called.</strong></p>
  
  <p>I used below code in javascript:</p>
  
  <pre><code>var map;
  var infowindow;
  var currentLattitude;
  var currentLongitude;
  
  //AddEventListener for device ready
  document.addEventListener('deviceready', onDeviceReady, false);
  
  
  // Function gets called when device is ready
  function onDeviceReady()
  {
      navigator.geolocation.getCurrentPosition(onSuccess,
                                               onError);
  
  
  
  }
  
  // onSuccess Callback receives a Position object
  var onSuccess = function(position) {
  
      currentLattitude = position.coords.latitude;
      currentLongitude = position.coords.longitude;
      initialize();
  };
  
  // onError Callback receives a PositionError object
  //
  function onError(error) {
      alert('code: '    + error.code    + '\n' +
            'message: ' + error.message + '\n');
  }
  
  
  function initialize() {
      var pyrmont = new google.maps.LatLng(currentLattitude,currentLongitude);
  
      map = new google.maps.Map(document.getElementById('map'), {
                                center: pyrmont,
                                zoom: 15
                                });
  
      var request = {
      location: pyrmont,
      radius: '5000',
      types: ['restaurant']
      };
  
      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 &lt; 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);
                                    });
  }
  </code></pre>
  
  <p><strong>And my html code is:</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="format-detection" content="telephone=no" /&gt;
          &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/index.css" /&gt;
          &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/custom.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlOnbFDz29ydASADhRcKizpcx9VIfBXV8&amp;sensor=true"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
  
          &lt;/script&gt;
          &lt;style type="text/css"&gt;
              html, body, #map
              {
                  height: 100%;
              }
              #map
              {
                  width: 100%;
              }
          &lt;/style&gt;
          &lt;title&gt;Hello World&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="map"&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks in advance</p>