如何添加谷歌地图自动完成搜索框? [英] How to add Google Maps Autocomplete search box?

查看:2627
本文介绍了如何添加谷歌地图自动完成搜索框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想一个谷歌自动完成搜索框添加到一个网站,以便用户可以容易地搜索一个地址越好。

I am trying to add a Google autocomplete search box to a website so that users can search for an address as easily as possible.

我的问题是,我看着这里的许多问题以及关于这一点谷歌地图的JavaScript API v3和一些教程,但他们都捆绑一起映射它嵌入谷歌地图上的自动完成功能。

My problem is, I have looked a numerous questions on here as well as the Google Maps Javascript API v3 regarding this and some tutorials yet they all bundle together the autocomplete functionality with mapping it on an embedded Google map.

我并不需要视觉地图的位置,我只需要自动完成框现在,不幸的是我不能工作了哪些API的部分是有关这一点,每一个例子,我已经看过,包括很多JS的映射。

I don't need to map the location visually, I just need the autocomplete box for now, unfortunately I cannot work out which parts of the API are relevant to this and every example I have looked at includes plenty of JS for mapping.

有谁知道,与添加自动完成输入功能,只涉及一种资源。

Does anybody know of a resource that deals ONLY with adding the autocomplete input functionality.

该网站是<一个href=\"http://www.doms$c$cstage.com/Belmont%20Website%20Official/storage.htm\">here.

如果您点击报价计算器'>>>'运输'>>>'收集'你会看到输入框,我想添加此功能。

If you click on 'Quote Calculator'>>>'Transport'>>>'Collect' you will see the input box where I would like to add this functionality.

我不要求任何人做我的工作对我来说,只是帮我找到了我所需要的。

I am not asking anybody to do my work for me, just to help me find what I need.

在此先感谢

推荐答案

这code的显著部分可以消除的。

A significant portion of this code can be eliminated.

HTML摘录:

<head>
...
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
...
</head>
<body>
...
<input id="searchTextField" type="text" size="50">
...
</body>

使用Javascript:

Javascript:

function initialize() {

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}

google.maps.event.addDomListener(window, 'load', initialize);

您可以看到在 http://www.redwoodtransit.org

这篇关于如何添加谷歌地图自动完成搜索框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆