title: Fetching nearby locations from google places and adding markers on google map from results
body: <p>EDIT: SOLVED. Correct code below the problem code.</p>
  
  <p>I'm having trouble getting my code to work. What I want to do is to use geolocation to determine the users location. I then want to do a search to locate something from a string (in this case, "Systembolaget", in a radius of 2000, and show the results on a google map. I get my own location on the map, but i'm having big trouble getting the places results.</p>
  
  <p>What am I doing wrong? I don't have that much experience from javascript, so all help is good help.</p>
  
  <p>If you're wondering about the cordova script, it's necessary since I'm doing a phonegap application.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
  &lt;script src="cordova-1.6.0.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { height: 100% }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&amp;sensor=true"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  // Determine support for Geolocation and get location or give error
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
  } else {
      alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.');
  }
  
  // Success callback function
  function displayPosition(pos) {
      var mylat = pos.coords.latitude;
      var mylong = pos.coords.longitude;
      //Load Google Map
      var latlng = new google.maps.LatLng(mylat, mylong);
      var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // Places
  var request = {
      location: latlng,
      radius: '2000',
      name: ['Systembolaget']
  };
  
  var service = new google.maps.places.PlacesService(map);
  service.search( request, callback );
  
  function callback(results, status) 
  {
      if (status == google.maps.places.PlacesServiceStatus.OK) 
      {
          for ( var i = 0; i &lt; results.length; i++ ) 
          {
              var place = results[i];
              var loc = place.geometry.location;
              var marker = new google.maps.Marker
              ({
                  position: new google.maps.LatLng(loc.Pa,loc.Qa)
              });
              marker.setMap(map);  
          }
      }
  }
  
  var marker = new google.maps.Marker({
       position: latlng, 
       map: map, 
       title:"You are here"
   });
  }
  
  // Error callback function
  function errorFunction(pos) {
      alert('It seems like your browser or phone has blocked our access to viewing your location. Please enable this before trying again.');
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>SOLVED! CORRECT CODE!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /&gt;
  
  &lt;title name="title"&gt;&lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;script src="cordova-1.6.0.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  // Determine support for Geolocation and get location or give error
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
  } else {
      alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.');
  }
  
  // Success callback function
  function displayPosition(pos) {
      var mylat = pos.coords.latitude;
      var mylong = pos.coords.longitude;
      //Load Google Map
      var latlng = new google.maps.LatLng(mylat, mylong);
      var myOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
  };
  
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // Places
  var request = {
      location: latlng,
      radius: '20000',
      name: ['whatever']
  };
  
  var service = new google.maps.places.PlacesService(map);
  service.search( request, callback );
  
  function callback(results, status) 
  {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i &lt; results.length; i++) {
              var place = results[i];
              createMarker(results[i]);
              }
          }
      }
  
      function createMarker(place) {
          var placeLoc = place.geometry.location;
          var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
          });
          }
  
  var marker = new google.maps.Marker({
       position: latlng, 
       map: map, 
       title:"You're here"
   });
  
  
  }
  
  // Error callback function
  function errorFunction(pos) {
      alert('It seems like your browser or phone has blocked our access to viewing your location. Please enable this before trying again.');
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>