title: Google place search markers not showing on map
body: <p>I'm coding a demo of how I want a future search function to work. I want to query google on an address or area and return the area bounds as well as nearby places. To do this, I am using places autocomplete, geocode, and places search. </p>
  
  <p>So far I am successfully getting predicted search queries resulting in the bounds being drawn as a rectangle on my map. However, when I try to implement markers for the place search result no markers are appearing on my map. I know the search is working because putting an alert in the createMarker function on each location returns several lat/lng's that coincide with my area. </p>
  
  <p>I suspect that maybe the map object is not being passed to my createMarker function, but I am kind of a noob when it comes to Javascript. I tried passing an additional parameter but it didn't do much.</p>
  
  <p>It should be noted that I am able to create a marker within the initialize function, when I attempt to just create one static marker.</p>
  
  <p>EDIT: I have removed the type parameter for the place search request, but the code doesn't work even with the parameter ['store'].</p>
  
  <pre><code>var map;
  var infowindow;
  
  
  function initialize() {
  
  var view_lat = document.getElementById('view_lat').value;
  var view_lng = document.getElementById('view_lng').value;
  var focus = new google.maps.LatLng(view_lat,view_lng);
  var swlat = document.getElementById('swlat').value;
  var swlng = document.getElementById('swlng').value;
  var nelat = document.getElementById('nelat').value;
  var nelng = document.getElementById('nelng').value;
  var map_canvas = document.getElementById('map-canvas_embed');
  var map_options = {
      center: new google.maps.LatLng(parseFloat(view_lat), view_lng),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mysw = new google.maps.LatLng(swlat,swlng)
  
  var map = new google.maps.Map(map_canvas, map_options)
  var rectangle = new google.maps.Rectangle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: new google.maps.LatLngBounds(
          new google.maps.LatLng(swlat, swlng),
          new google.maps.LatLng(nelat, nelng))
  });
  var request = {
      location: focus,
      radius: 500
  
  };
  
  var place_search = new google.maps.places.PlacesService(map);
  place_search.nearbySearch(request,callback)
  
  
  
  }
  </code></pre>
  
  <p>Handles the result from google places search</p>
  
  <pre><code>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({
  
      position: place.geometry.location
  });
  marker.setMap(map);
  }
  </code></pre>
  
  <p>Autocomplete variables</p>
  
  <pre><code>var input = document.getElementById('location');
  var options = {
      componentRestrictions: {country: 'se'},
      types: ['geocode']
  }
  var searchform = document.getElementById('searchform');
  var place;
  var autocomplete = new google.maps.places.Autocomplete(input, options);
  </code></pre>
  
  <p>Add listener to detect autocomplete selection</p>
  
  <pre><code>google.maps.event.addListener(autocomplete, 'place_changed', function () {
      place = autocomplete.getPlace();
      //console.log(place);
  });
  </code></pre>
  
  <p>Add listener to search (This function isn't working, hence my work around in the initialize function)</p>
  
  <pre><code>searchform.addEventListener("submit", function() {
      var newlatlong = new       google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
      map.setCenter(newlatlong);
      marker.setPosition(newlatlong);
      map.setZoom(12);
      google.maps.event.trigger(map, 'resize');
  
  });
  </code></pre>
  
  <p>Reset the inpout box on click</p>
  
  <pre><code>input.addEventListener('click', function(){
      input.value = "";
  });
  </code></pre>
  
  <p>Call the initialize function</p>
  
  <pre><code>google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>