title: Google Places API example
body: <h1>The Problem</h1>
  <p>I've been trying to get <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete" rel="nofollow noreferrer">this</a> google maps API example working but after copying the code exactly from google's site, the example fails to render properly. ie the map completely fails to render, search bar is -350px of the page ect.</p>
  <p><em>To see what I mean, check out this <a href="http://jsfiddle.net/agconti/NpYwE/" rel="nofollow noreferrer">JSfiddle</a>.</em></p>
  <p>The example works great on Google's above mentioned documentation page, so I know its something I'm doing. Any ideas?</p>
  <h3>EDIT: I got the css from google's site, but still the problem persists.</h3>
  <p>Below is the code causing the problems:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Places Autocomplete&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, user-scalable=no&quot;&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;link href=&quot;CSS/default.css&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;script src=&quot;https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places&quot;&gt;&lt;/script&gt;
  
      &lt;style&gt;
        input {
          border: 1px solid  rgba(0, 0, 0, 0.5);
        }
        input.notfound {
          border: 2px solid  rgba(255, 0, 0, 0.4);
        }
      &lt;/style&gt;
  
      &lt;script&gt;
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-33.8688, 151.2195),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  
    var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
    var autocomplete = new google.maps.places.Autocomplete(input);
  
    autocomplete.bindTo('bounds', map);
  
    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      map: map
    });
  
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      infowindow.close();
      marker.setVisible(false);
      input.className = '';
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        // Inform the user that the place was not found and return.
        input.className = 'notfound';
        return;
      }
  
      // If the place has a geometry, then present it on a map.
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
      }
      marker.setIcon(/** @type {google.maps.Icon} */({
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(35, 35)
      }));
      marker.setPosition(place.geometry.location);
      marker.setVisible(true);
  
      var address = '';
      if (place.address_components) {
        address = [
          (place.address_components[0] &amp;&amp; place.address_components[0].short_name || ''),
          (place.address_components[1] &amp;&amp; place.address_components[1].short_name || ''),
          (place.address_components[2] &amp;&amp; place.address_components[2].short_name || '')
        ].join(' ');
      }
  
      infowindow.setContent('&lt;div&gt;&lt;strong&gt;' + place.name + '&lt;/strong&gt;&lt;br&gt;' + address);
      infowindow.open(map, marker);
    });
  
    // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    function setupClickListener(id, types) {
      var radioButton = document.getElementById(id);
      google.maps.event.addDomListener(radioButton, 'click', function() {
        autocomplete.setTypes(types);
      });
    }
  
    setupClickListener('changetype-all', []);
    setupClickListener('changetype-establishment', ['establishment']);
    setupClickListener('changetype-geocode', ['geocode']);
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;panel&quot; style=&quot;margin-left: -260px&quot;&gt;
        &lt;input id=&quot;searchTextField&quot; type=&quot;text&quot; size=&quot;50&quot;&gt;
        &lt;input type=&quot;radio&quot; name=&quot;type&quot; id=&quot;changetype-all&quot; checked=&quot;checked&quot;&gt;
        &lt;label for=&quot;changetype-all&quot;&gt;All&lt;/label&gt;
  
        &lt;input type=&quot;radio&quot; name=&quot;type&quot; id=&quot;changetype-establishment&quot;&gt;
        &lt;label for=&quot;changetype-establishment&quot;&gt;Establishments&lt;/label&gt;
  
        &lt;input type=&quot;radio&quot; name=&quot;type&quot; id=&quot;changetype-geocode&quot;&gt;
        &lt;label for=&quot;changetype-geocode&quot;&gt;Geocodes&lt;/lable&gt;
      &lt;/div&gt;
      &lt;div id=&quot;map-canvas&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>