title: Geolocation with Google maps API and Google text Search
body: <p>I am new to javascript converting from VB. This is my first shot at creating a dynamic google map and am ultimatly trying to generate a google map using the users location and apply a places search for sports stores. Currently my map generates and zooms to my location but does not apply the search results with markers.
  here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"&gt;&lt;/script&gt;
  
      &lt;article&gt;
        &lt;p&gt;Finding your location: &lt;span id="status"&gt;checking...&lt;/span&gt;&lt;/p&gt;
      &lt;/article&gt;
  &lt;script&gt;
  function success(position) {
    var s = document.querySelector('#status');
    
    if (s.className == 'success') {
      // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back    
      return;
    }
    
    s.innerHTML = "found you!";
    s.className = 'success';
    
    var mapcanvas = document.createElement('div');
    mapcanvas.id = 'mapcanvas';
    mapcanvas.style.height = '400px';
    mapcanvas.style.width = '560px';
      
    document.querySelector('article').appendChild(mapcanvas);
  
  
    
    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeControl: false,
      navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
    var service;
    var infowindow;
   var request = {
      location: latlng,
      radius: '3200',
      query: 'sports'
    };
  
    service = new google.maps.places.PlacesService(map);
    service.textSearch(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 error(msg) {
    var s = document.querySelector('#status');
    s.innerHTML = typeof msg == 'string' ? msg : "failed";
    s.className = 'fail';
    
    // console.log(arguments);
  }
  
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
  } else {
    error('not supported');
  }
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I feel like I might be missing some var assignments or not over writing the current map from "map canvas". Has any one created something similar that provide some insight? Any help is greatly appreciated to find why my search results will not display on the map. Thanks!</p>