2016-12-02 4 views
-1

Я искал, как сделать поле поиска поле, как Google поле поиска карты. И я нашел правильный ответ here, на который ответил @MrUpsidown. Это jsfiddle ответ от @MrUpsidown jsfiddle, и он отлично работает. Затем я пытаюсь реализовать его в своем проекте, но он не работает.Google карты окно поиска вне карты не функция

вот мой код:

<!DOCTYPE html> 
<html> 
<head> 
<title> 
    Search Box Map 
</title> 
<style> 
    #autocomplete { 
    width:300px; 
    } 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyB1Z4LA0_Q-qH3Sfq-vIr3lShYnIwS1KUw&libraries=places" ></script> 
<script> 

    function initialize() { 

    new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), { 
     types: ['geocode'] 
    }); 
    } 

    initialize(); 

</script> 
</head> 

<body> 

<input id="autocomplete" placeholder="Enter your address" type="text"></input> 


</body> 
</html> 

Я следую коды, но по-прежнему не работает. Я где-то пропажу?

ответ

1

Необходимо позвонить по телефону initializeпосле DOM. В настоящее время вы вызываете его в начале документа до того, как существует элемент <input>.

Вызов после элемента <input> html определяется в документе или в событии onload (скрипт, на котором вы ссылаетесь, запускает JavaScript в функции onload).

<style> 
 
    #autocomplete { 
 
    width: 300px; 
 
    } 
 
</style> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyB1Z4LA0_Q-qH3Sfq-vIr3lShYnIwS1KUw&libraries=places"></script> 
 
<script> 
 
    function initialize() { 
 

 
    new google.maps.places.Autocomplete(
 
     (document.getElementById('autocomplete')), { 
 
     types: ['geocode'] 
 
     }); 
 
    } 
 
</script> 
 

 
<input id="autocomplete" placeholder="Enter your address" type="text"></input> 
 
<script> 
 
    initialize(); 
 
</script>

+0

это работает! Я действительно новичок в этой карте google. Благодаря ! –

+0

сделано. –

Смежные вопросы