谷歌地图API v3 - 如何通过地址获取地图?

21

我是Google Maps的新手, 我想将其集成到我的网站上(类似于黄页)。

我目前拥有以下代码:

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
        }); 
    </script>
</head>
<body>
    <div id="map_canvas" style="width: 500px; height: 300px; position: relative; background-color: rgb(229, 227, 223);"></div>
</body>
</html>

这段代码是有效的,它展示了特定纬度/经度的地图。

但是,我希望能够指定地址而不是纬度/经度参数,因为我在电话簿中有公司的地址,但没有纬度/经度数值。

我尝试搜索此项内容,但只找到了类似于V2版本(已弃用)的东西。

5个回答

14
你需要的是谷歌服务中的地理编码功能。首先提供地址以获取一个经纬度,然后调用setCenter将地图平移至特定位置。谷歌的API对此进行了良好的封装,你可以通过这个示例看到它的工作原理。
var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

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

请使用以下链接获取英文版而非西班牙语版:https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple。 - MemeDeveloper
使用geocoder.geocode时是否也有配额限制? - basZero

12

1
http://code.google.com/apis/maps/documentation/javascript/services.html#Geocoding 另外还有一个有用的链接。 - Rafael Herscovici

8
如果您可以使用iframe,那么您可以跳过地理编码的麻烦,使用Google Maps嵌入式API

Google Maps嵌入式API是免费使用的(没有配额或请求限制),但您必须注册一个免费的API密钥才能将地图嵌入您的网站。

例如,您可以将以下内容嵌入您的页面中(将省略号替换为您自己的个人Google API密钥):
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?
q=301+Park+Avenue,+NY,+United+States&key=..."></iframe> 

显然,其实用会根据你的使用情况而有所不同,但我认为这是一个快速且简单的解决方案。

你还必须接受你的地图上有广告。https://developers.google.com/maps/documentation/embed/guide 地图上的广告Google Maps Embed API 可能包含地图上的广告。广告格式和在任何给定地图上显示的广告集可能会在没有通知的情况下更改。 - H. Abraham Chavez

1

1
第一个链接也不是。 - Alan B

1

gmap3实际上并不为您完成此操作,正如另一个答案所建议的那样:它只是为您提供了一个API来抽象出整个过程中与地理编码相关的部分。

答案是:Google现在实际上不再允许您这样做。 至少在V3中不允许,并且因为它已经存在了一年多......

您实际上可以发送有关驾驶路线的地址,但是他们的API已将发送任何基本嵌入式地图地址(API-based map)视为非法。 地理编码的每日配额是“仍然允许”地址,但实际上完全不允许它们用于任何真正的网站。

您可以链接到带有地址的地图,尽管我在Google的文档中找不到这一点:

http://maps.google.com/maps?f=d&saddr=&daddr=this 这是我的地址,城市州

也许我的问题只是因为他们没有提供清晰、易懂的文档,我必须来到StackOverflow上获取所需答案。例如,他们含糊地提到需要API密钥来绕过匿名限制,却没有链接说明那些限制是什么,以及如何在没有密钥的情况下使用他们的API,而这正是我想在试验性或概念验证阶段中做的。相反,谷歌更喜欢推广他们的商业地图等产品,而不是提供实际信息。

1
嗯...谷歌搜索“谷歌地理限制”找到了这个链接:http://googlegeodevelopers.blogspot.com/2012/06/lower-pricing-and-simplified-limits.html - Rafael Herscovici

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接