Search jQuery

jQuery Forum

jQuery Mobile

abbnet

jquery mobile and google maps places api v3 autocomplete

in jQuery Mobile • 11 years ago

Dear,

I was not able to find my solution (only found other solutions that I 'can not' use).

My context :

I have an input text field in JQM. The user should fill an address (number street town) like in Google Maps.

I want an autocomplete with suggested address.

My constraint :

Use the V3 Google Maps Api "places" that offer an "autocomplete" function (http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/places.html#places_autocomplete) :

function myAutocomplete() {
var input = document.getElementById('searchAddress');
var autocomplete = new google.maps.places.Autocomplete(input, options);
}

Or/and use JQM autocomplete feature for a input text field :

$('#address').live('pagecreate', function (event) {
$('#searchAddress').autocomplete({
source: ....
minLength: 3,
select: function(event, ui) {
$('#searchAddress').val(ui.item.label);
return false;
}
});
});

On a web browser of a computer (not a mobile phone), the Google autocomplete workd fine, but on a mobile phone, the autocomplete does not really work.

I found solution that use the "source" argument that point to

- another page (that return a JSON result from Google API Places)

- or point to another js function that make a Jquery request in ajax (that get the JSON result)

But I do not want to use theses solutions because it use Google API in https and the API key.

I want to use the Google API V3.

I did not succeed to use the object :

- new google.maps.places.Autocomplete(input, options);

- with JQM input text field and autocomplete

Extract of source code (without javascript for autocomplete as I do not have a correct solution) :

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.17/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=fr" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<title>Application mobile - Démo</title>
</head>
<body>
<div data-role="page" id="address">
<div data-role="header" data-position="inline">
<a data-rel="back" data-icon="arrow-l">Retour</a>
<h1>Démonstration</h1>
</div>
<div data-role="content">
<p>Adresse</p>
<label for="searchAddress" class="ui-hidden-accessible">Saisir une adresse :</label>
<input type="search" name="address" id="searchAddress" value="" placeholder="Saisir une adresse..."/>
<p><a data-rel="back" data-role="button" data-icon="check">Valider</a></p>
</div>
</body>
</html>