title: Getting"Uncaught TypeError: Cannot read property 'value' of null" on Google Places API
body: <p>I'm currently upgrading my website with Google Place API and I have one more problem away until I'm getting it to work and I don't understand why I'm getting this error message: <code>Uncaught TypeError: Cannot read property 'value' of null</code>. I have readed the whole <a href="https://developers.google.com/maps/documentation/javascript/places" rel="noreferrer">Places Library</a> and even "scanned" the whole <a href="https://google-developers.appspot.com/maps/documentation/javascript/examples/places-autocomplete" rel="noreferrer">example file</a> but my code is the exactly the same as theirs.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>var geocoder;
  var map;
  var myplace = '&lt;?php echo str_replace(" ", "-", utf8_encode($_COOKIE["wrn-myplace"])); ?&gt;';
  var myplace_clean = '&lt;?php echo $_COOKIE["wrn-myplace"]; ?&gt;';
  
  geocoder = new google.maps.Geocoder();
  geocoder.geocode({'address' : myplace_clean}, function(results, status) {
      if(status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var myplace_center = results[0].geometry.location;
  
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
          });
  
          var myplaceControlDiv = document.createElement('div');
          var myplaceControl = new MyPlaceControl(myplaceControlDiv, map, myplace_center);
  
          myplaceControlDiv.index = 2;
          map.controls[google.maps.ControlPosition.TOP_RIGHT].push(myplaceControlDiv);
      } else {
          alert('Funktionen "geocoder" kunde inte användas på grund av följande fel: ' + status);
      }
  });
  
  var mapOptions = {
      streetViewControl: false,
  
      mapTypeControl: true,
      navigationControlOptions: {
          style: google.maps.NavigationControlStyle.SMALL
      },
  
      zoomControl: true,
      zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL,
          position: google.maps.ControlPosition.TOP_LEFT
      },
  
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  
  
  map = new google.maps.Map(
      document.getElementById('weather-map'), mapOptions
  );
  
  
  var input = document.getElementById('google-search');
  var autocomplete = new google.maps.places.Autocomplete(input);
  
  autocomplete.bindTo('bounds', map);
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
      var place = autocomplete.getPlace();
      if(place.geometry.viewport) {
          map.fitBounds(place.geometry.viewport);
      } else {
          var marker = new google.maps.Marker({
              map: map,
              position: place.geometry.location
          });
  
          map.setCenter(place.geometry.location);
          map.setZoom(17);
      }
  });
  
  
  var cloudControlDiv = document.createElement('div');
  var cloudControl = new CloudControl(cloudControlDiv, map);
  
  cloudControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(cloudControlDiv);
  
  
  var fullscreenControlDiv = document.createElement('div');
  var fullscreenControl = new FullscreenControl(fullscreenControlDiv, map);
  
  fullscreenControlDiv.index = 3;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(fullscreenControlDiv);
  
  
  var boxText = document.createElement("div");
  boxText.style.cssText = 'background-color: #000000; border: 1px solid #ffffff; color: #eaeaea; font-family: Arial; font-size: 11px; padding: 5px 10px 5px 10px;';
  boxText.innerHTML = 'Du är här';
  
  var myPopup = {
          content: boxText,
          disableAutoPan: false,
          maxWidth: 300,
          pixelOffset: new google.maps.Size(-100, -100),
          zIndex: null,
          boxStyle: {
              opacity: 0.80,
              width: '200px'
          },
          closeBoxMargin: '3px',
          closeBoxURL: 'http://p.yusukekamiyamane.com/icons/search/fugue/icons/cross-octagon-frame.png',
          infoBoxClearance: new google.maps.Size(1, 1),
          isHidden: false,
          enableEventPropagation: true
  };
  
  
  var cloudLayer = new google.maps.weather.CloudLayer();
  cloudLayer.setMap(map);
  
  elevator = new google.maps.ElevationService();
  google.maps.event.addListener(map, 'click', getElevation);
  
  map.setZoom(10);
  
  $('#weather-data').load('jquery-fetch/fetch-weatherdata.php?place=' + myplace);
  </code></pre>
  
  <p><code>show_position</code> is called in the <code>initialize</code> function and this is the "description" for my error message:</p>
  
  <pre><code>kK
  tK.(anonymous function).dl
  (anonymous function)
  (anonymous function)%7Bmain,places,weather%7D.js:9
  bf.(anonymous function).Hc.c%7Bmain,places,weather%7D.js:24
  O%7Bmain,places,weather%7D.js:9
  df%7Bmain,places,weather%7D.js:24
  hf%7Bmain,places,weather%7D.js:24
  (anonymous function)
  ef.controls
  (anonymous function)%7Bmain,places,weather%7D.js:24
  b%7Bmain,places,weather%7D.js:10
  bf.(anonymous function).Hc%7Bmain,places,weather%7D.js:24
  O%7Bmain,places,weather%7D.js:9
  bf.(anonymous function).Hc%7Bmain,places,weather%7D.js:24
  af.(anonymous function).ke%7Bmain,places,weather%7D.js:23
  bf.(anonymous function).Hc%7Bmain,places,weather%7D.js:24
  ff%7Bmain,places,weather%7D.js:24
  (anonymous function)
  </code></pre>
  
  <p>I'm calling for the JS file from Google like this:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={my API key}&amp;sensor=false&amp;libraries=weather,places"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>How can I fix my small problem?</p>
  
  <p>Thanks in advance!</p>