title: Googlemap autocomplete not working even with working code
body: <p>i have found some codes for auto complete and it works, like this</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"&gt;&lt;/script&gt;
  
  function initialize() {
  
          var input = document.getElementById('address');
          var autocomplete = new google.maps.places.Autocomplete(input);
      }
  
      google.maps.event.addDomListener(window, 'load', initialize);
  
  &lt;input id="address" type="text" size="50"/&gt;
  </code></pre>
  
  <p>this works perfectly in a project just for auto complete.</p>
  
  <p>but when i implement this in my actual project, it doesn't work,i am not sure where to put those codes.</p>
  
  <p>this is my full project code.everything works fine but the auto complete is not working</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="CSS.css"/&gt;
      &lt;script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAfJKrk9pQNoNTIGTzj6f0jLXL78ryRnxQ&amp;sensor=false"&gt; 
  
      &lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"&gt;&lt;/script&gt;
      &lt;script src="http://maps.google.com/maps/api/js?v=3.exp&amp;sensor=false" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="http://maps.googleapis.com/maps/api/directions/output?parameters"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;v=3&amp;libraries=geometry"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          var myCenter = new google.maps.LatLng(3.213912, 101.727202); /
          var newmarker; //global variable to set new marker
          var map;
          var newlat;
          var newlng;
          var newmarkerpos;
          var rendererOptions = {
              draggable: true 
          };
          var start;
          var end;
          var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
          var directionsService = new google.maps.DirectionsService();
          var geocoder = new google.maps.Geocoder();
  
          //var infowindow1 = new google.maps.InfoWindow({
          //    content: '&lt;div id="infowindow1" style="CSS.css"&gt;&lt;/div&gt;'
          //});
  
          function initialize() {
  
              var input = document.getElementById('address');
              var autocomplete = new google.maps.places.Autocomplete(input);
  
              var mapProperty = {
                  center: myCenter,                            
                  zoom: 17,                                   
                  mapTypeId: google.maps.MapTypeId.ROADMAP, 
                  scaleControl: true,                         
                  overviewMapControl: true           
              };
  
              map = new google.maps.Map(document.getElementById("googleMap")
                , mapProperty);
  
              var input = document.getElementById('address');
              var autocomplete = new google.maps.places.Autocomplete(input);
  
              var infowindow = new google.maps.InfoWindow({
                  content: '&lt;div id="infowindow" style="CSS.css"&gt;We are here!&lt;/div&gt;'
              });
  
  
              directionsDisplay.setMap(map);
  
              var marker = new google.maps.Marker({
                  position: myCenter,                     
                  animation: google.maps.Animation.BOUNCE, 
                  icon: '../Images/Icon4.png'
              });
  
              marker.setMap(map);
  
              directionsDisplay.setPanel(document.getElementById('directionspanel'));
  
  
              infowindow.open(map, marker);
  
              google.maps.event.addListener(marker, 'click', function () {
                  map.setZoom(17);
                  map.setCenter(marker.getPosition());
              });
  
              function placeMarker(location) {
  
                  if (newmarker) {
                      newmarker.setPosition(location);
                      newmarker.setVisible(true);
                  } else {
                      newmarker = new google.maps.Marker({
                          position: location,
                          map: map,
                          icon: '../Images/Icon4.png',
                          //draggable: true,
                      });
  
                  }
  
                  newlat = location.lat();    
                  newlng = location.lng();
  
                  newmarkerpos = new google.maps.LatLng(newlat, newlng);
  
  
              }
  
  
              google.maps.event.addListener(map, 'click', function (event) {
                  placeMarker(event.latLng);
              }); 
  
              google.maps.event.addDomListener(home, 'click', function () {
                  map.setZoom(17);
                  map.setCenter(myCenter)
              });
  
          }
  
          function cal() {
  
              start = new google.maps.LatLng(3.213912, 101.727202);
              end = new google.maps.LatLng(newmarkerpos.lat(), newmarkerpos.lng());
              var request = {
  
                  origin: start,
                  destination: end,
                  travelMode: google.maps.TravelMode.DRIVING
              };
              directionsService.route(request, function (response, status) {
                  if (status == google.maps.DirectionsStatus.OK) {
                      directionsDisplay.setDirections(response);
                  }
              });
              directionsDisplay.setMap(map);
              newmarker.setVisible(false);
  
          }
  
          function clearmap() {
  
              newmarker.setVisible(false);
              newmarkerpos = null;
              directionsDisplay.setMap(null);
              document.getElementById("directionspanel").innerHTML = "";
              document.getElementById('address').value = "";
  
          }
  
          function geocode() {
              var address = document.getElementById('address').value;
  
              geocoder.geocode({ 'address': address }, function (results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                      var geolat = results[0].geometry.location.lat();
                      var geolng = results[0].geometry.location.lng();
  
                      start = new google.maps.LatLng(3.213912, 101.727202);
                      end = new google.maps.LatLng(geolat, geolng);
                      var request = {
  
                          origin: start,
                          destination: end,
                          travelMode: google.maps.TravelMode.DRIVING
                      };
                      directionsService.route(request, function (response, status) {
                          if (status == google.maps.DirectionsStatus.OK) {
                              directionsDisplay.setDirections(response);
                          }
                      });
                      directionsDisplay.setMap(map);
                      newmarker.setMap(null);
  
                      map.setCenter(results[0].geometry.location);
                      newmarker = new google.maps.Marker({
                          position: results[0].geometry.location,
                          map: map,
                          zoom: 15,
                          icon: '../Images/Icon4.png',
                          draggable: true,
  
                      });
  
  
                  }
              });
  
          }
  
          google.maps.event.addDomListener(window, 'load', initialize); 
      &lt;/script&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Our Location&lt;/h1&gt;
      &lt;div id="googleMap" style="width:800px; height:450px;"&gt;
      &lt;/div&gt; 
  &lt;!--    &lt;div id="dvdistance" style="width:400px; height:100px; border:solid"&gt;
      see ///***
      &lt;/div&gt;--&gt;
      &lt;div id="geocoding"&gt;
          &lt;input id="address" type="text" placeholder="Enter an address" size="33" /&gt;
          &lt;input type="button" value="geocode" onclick="geocode()" /&gt;
      &lt;/div&gt;
      &lt;button type="button" id="home" style:"CSS.css" &gt;HOME&lt;/button&gt;
      &lt;button type="button" id="clearmap" onclick="clearmap()" style:"CSS.css"&gt;CLEAR MAP&lt;/button&gt;
      &lt;input type="button" id="cal" onclick="cal()" value="GET DIRECTION" /&gt;
      &lt;div id="directionspanel" style:"CSS.css"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>i have placed the auto complete after i set up my map.
  but now the auto complete is not working.
  what's the problem?
  Where should i place it?</p>