title: TypeError: map is undefined google api
body: <p>I have been referencing a found tutorial and have stumbled upon an error using the google maps api. I am getting and error that telling me that a variable is not defined when in fact it is. I am not exactly sure what the problem is.. Please help.</p>
  
  <pre><code>    &lt;title&gt;&lt;/title&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" 
      src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=true"&gt;
  &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
      var map;
      var service;
  
      function handleSearchResults (results, status)
      {
           console.log(results);
      }
      function performSearch ()
      {
          var request = {
              bounds: map.getBounds(),
              name: "McDonald's" // within the bounds find the given name
          }
          service.nearbySearch(request, handleSearchResults);
      }
  
      function initialize (location) //initializing geolocation function
      {
              console.log(location);
  
          var currentLocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude)
              var mapOptions = {
                  center: currentLocation,
                  zoom: 13
              };
              var map = new google.maps.Map(document.getElementById("map-canvas"),
                  mapOptions);
                  // To add the marker to the map, use the 'map' property
              var marker = new google.maps.Marker({
                  position: currentLocation,
                  map: map // referencing google map from variable map above
               });
  
              service = new google.maps.places.PlacesService(map);
  
        // wait until map bounds are initialized before performing search
        google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
      }
  
      $( document ).ready(function()
      {
          navigator.geolocation.getCurrentPosition(initialize);  
  
      });
  
      &lt;/script&gt;
  
  
  
  
  
  &lt;/html&gt;
  </code></pre>