title: Google maps v3 with autocomplete at jQuery mobile and PhoneGap
body: <p>I'm developing an app with JQM and PhoneGap.</p>
  
  <p>First Page: 
  - The user can search a street or city by entering the address. The input field should have an autocomplete function.
  - In addition, old searches (already used addresses) should be displayed below the search box</p>
  
  <p>After the user entered his address, the second page should be opend</p>
  
  <p>Second Page:
  - This page shows the google map at the entered address.</p>
  
  <hr>
  
  <p><strong>How can I do that?</strong> </p>
  
  <p>I found this thread:
  <a href="https://stackoverflow.com/questions/16038562/phonegap-jquery-mobile-google-maps-v3-map-shows-top-left-tiles">PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?</a>
  and I think this could be my second page:
  <a href="http://jsfiddle.net/Gajotres/GHZc8/" rel="nofollow noreferrer">http://jsfiddle.net/Gajotres/GHZc8/</a></p>
  
  <p>EDIT: StackOverflow says I should accompanied jsfiddle.net by code. Here is the JS Part:</p>
  
  <pre><code>$(document).on('pageshow', '#map', function (event) {
      max_height();
          navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':20000});
  });
  
  function max_height() {
      var header = $.mobile.activePage.find("div[data-role='header']:visible");
      var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
      var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
      var viewport_height = $(window).height();
  
      var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
      if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) &lt;= viewport_height) {
          content_height -= (content.outerHeight() - content.height());
      } 
      $.mobile.activePage.find('[data-role="content"]').height(content_height);
  }
  
  
  function onSuccess(position) {       
      var minZoomLevel = 15;
  
      var map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: minZoomLevel,
          center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });    
  }
  
  function onError() {
      alert('Error');
  }
  </code></pre>
  
  <hr>
  
  <p><strong>But, how could be the first searchpage with autocomplete?</strong> </p>
  
  <p>At this page: <a href="http://jquery-ui-map.googlecode.com/svn../trunk/demos/jquery-google-maps-mobile.html" rel="nofollow noreferrer">http://jquery-ui-map.googlecode.com/svn../trunk/demos/jquery-google-maps-mobile.html</a>
  There are some examples for Google Maps v3. But now comes the problem. I can't find a solution for a normal search with autocomplete. There is only an example for a place-search with autocomplete. Is that not possible? </p>