Search jQuery

jQuery Forum

Screen name:
abbnet

abbnet's Profile

1 Posts

0 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

jquery mobile and google maps places api v3 autocomplete
[2Replies]
- 07-Feb-2012 06:58 PM
- Forum: jQuery Mobile
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) :
1. function myAutocomplete() {
2. var input = document.getElementById('searchAddress');
3. var autocomplete = new google.maps.places.Autocomplete(input, options);
4. }
Or/and use JQM autocomplete feature for a input text field :
1. $('#address').live('pagecreate', function (event) {
2. $('#searchAddress').autocomplete({
3. source: ....
4. minLength: 3,
5. select: function(event, ui) {
6. $('#searchAddress').val(ui.item.label);
7. return false;
8. }
9. });
10. });
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>
Thank you for any help.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend