Google MAP api v3 и автозаполнение jquery

Question

Я пытаюсь добавить простой текст с полным заполнением ввода с помощью jQuery и Google Map V3 для города, вот мой код HTML, чтобы вставить поле поиска;

<input id="places" class="ui-bar-d ui-input-text ui-body-null ui-shadow-inset ui-body-d ui-autocomplete-input ui-corner-all" placeholder="Which city ?" data-type="search"> 

Я последовал за исходный код этой страницы: Jquery mobile with Google map v3

Я добавил этот код во внешнем JS файла:

$(function() { 

function PlacesSearchControl(str) { 
    var el = document.createElement('DIV'); 
    var wrap = document.createElement('DIV'); 
    var input = document.createElement('INPUT'); 
    el.appendChild(wrap); 
    wrap.appendChild(input); 
    $(el).attr('id', 'control'); 
    $(input).addClass('ui-bar-d ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-d ui-autocomplete-input'); 
    $(input).attr('id', 'places'); 
    $(input).val(str); 
    $('#map_canvas').gmap('autocomplete', input, function(ui) { 
     $('#map_canvas').gmap('clear', 'markers'); 
     $('#map_canvas').gmap('set', 'bounds', null); 
     $.mobile.pageLoading(); 
     $('#map_canvas').gmap('placesSearch', { 'location': ui.item.position, 'radius': '5000'/*, 'name': ['store']*/ }, function(results, status) { 
      if (status === 'OK') { 
       $.each(results, function(i, item) { 
        $('#map_canvas').gmap('addMarker', { 'id': item.id, /*'icon': item.icon,*/ 'position': item.geometry.location, 'bounds':true }).click(function() { 
         $('#map_canvas').gmap('openInfoWindow', {'content': '<h4>'+item.name+'</h4>'}, this); 
        }); 
       }); 
      } 
      $.mobile.pageLoading(true); 
     }); 
    }); 
    $(input).focus(function() { 
     if ($(this).val() === str) { 
      $(this).val(''); 
     } 
    }).blur(function() { 
      if ($(this).val() == '') { 
       $(this).val(str); 
      } 
     }); 
    return el; 
} 

$('#map_canvas').gmap({'center': '58.00, 12.00', 'zoom': 3, 'disableDefaultUI': true, 'mapTypeId': 'roadmap'}).bind('init', function(event, map) { 
$('#map_canvas').gmap('addControl', new PlacesSearchControl('Search places...'), 1); 
}); 

}); 

Когда я пытаюсь ударить город в моем входе текстовое поле, ничего не происходит, может ли кто-нибудь помочь мне узнать, что не так в моем коде? Большое спасибо!

Answer 1

На протяжении всего Javascript вы использовали идентификатор, называемый map_canvas, но элемент не существует в вашем HTML коде. Если у вас уже есть код HTML, то я уверен, что вы не используете его правильно, используя скрипты.

$('#map_canvas').gmap('autocomplete', input, function(ui) { 
     $('#map_canvas').gmap('clear', 'markers'); 
     $('#map_canvas').gmap('set', 'bounds', null); 
     $.mobile.pageLoading(); 
     $('#map_canvas').gmap('placesSearch', { 'location': ui.item.position, 'radius': '5000'/*, 'name': ['store']*/ }, function(results, status) { 
      if (status === 'OK') { 
       $.each(results, function(i, item) { 
        $('#map_canvas').gmap('addMarker', { 'id': item.id, /*'icon': item.icon,*/ 'position': item.geometry.location, 'bounds':true }).click(function() { 
         $('#map_canvas').gmap('openInfoWindow', {'content': '<h4>'+item.name+'</h4>'}, this); 
        }); 
       }); 
      } 
      $.mobile.pageLoading(true); 
     }); 
    }); 

• Вы бы копию вставили весь код, используемый в этом примере, лежит проблема. Я предполагаю, что вы пытаетесь иметь only the search textBox. Если да, то проверьте это FIDDLE.
• Если вы пытаетесь получить autocomplete with textbox, то на основании пример, который я сделал DEMO в JSFiddle.

Надеюсь, вы поняли.