Google maps v3 with autocomplete at jQuery mobile and PhoneGap

Question

I'm developing an app with JQM and PhoneGap.

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

After the user entered his address, the second page should be opend

Second Page: - This page shows the google map at the entered address.

---

How can I do that?

I found this thread: PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles? and I think this could be my second page: http://jsfiddle.net/Gajotres/GHZc8/

EDIT: StackOverflow says I should accompanied jsfiddle.net by code. Here is the JS Part:

$(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()) <= 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');
}

---

But, how could be the first searchpage with autocomplete?

At this page: http://jquery-ui-map.googlecode.com/svn../trunk/demos/jquery-google-maps-mobile.html 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?

Answer 1

You need in import jQuery UI and here is some code I use

// Add autocomplete to an input box
function addAutocomplete( input ) {
    input.autocomplete({
        // source is the list of input options shown in the autocomplete dropdown.
        // see documentation: http://jqueryui.com/demos/autocomplete/
        source: function(request,response) {
            // the geocode method takes an address or LatLng to search for
            // and a callback function which should process the results into
            // a format accepted by jqueryUI autocomplete
            geocoder.geocode( {'address': request.term }, function(results, status) {
                response($.map(results, function(item) {
                    return {
                        label: item.formatted_address, // appears in dropdown box
                        value: item.formatted_address, // inserted into input element when selected
                        geocode: item                  // all geocode data
                    }
                }));
            })
        },
        select: function(event, ui) {
            // event triggered when drop-down option selected
        }
    });
}