从输入加载谷歌地图答案

【问题标题】：Loading Google maps from inputs从输入加载谷歌地图
【发布时间】：2012-06-17 08:12:33
【问题描述】：

我正在研究 google maps apiv3 http://briancray.com/posts/how-to-calculate-the-distance-between-two-addresses-with-javascript-and-google-maps-api 的示例

但是当我在生成 API 密钥后加载页面时，我得到的消息是

Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v2 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key

如果您看到我的代码，我已经从 Google 地图中为 APi 3 版本生成了一个密钥，并且在脚本标签中也指出了相同的内容。

我还应该在这里做什么才能让这个工作..谢谢

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
      <title>Google Maps JavaScript API Example: Extraction of Geocoding Data</title>
      <script src="http://maps.google.com/maps?file=api&v=3&key=ABQIFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>

  <!-- According to the Google Maps API Terms of Service you are required display a Google map when using the Google Maps API. see: http://code.google.com/apis/maps/terms.html -->
      <script type="text/javascript">

      var geocoder, location1, location2;

      function initialize() {
          geocoder = new GClientGeocoder();
      }

      function showLocation() {
          geocoder.getLocations(document.forms[0].address1.value, function (response) {
              if (!response || response.Status.code != 200)
              {
                  alert("Sorry, we were unable to geocode the first address");
              }
              else
              {
                  location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                  geocoder.getLocations(document.forms[0].address2.value, function (response) {
                      if (!response || response.Status.code != 200)
                      {
                          alert("Sorry, we were unable to geocode the second address");
                      }
                      else
                      {
                          location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                          calculateDistance();
                      }
                  });
              }
          });
      }

      function calculateDistance()
      {
          try
          {
              var glatlng1 = new GLatLng(location1.lat, location1.lon);
              var glatlng2 = new GLatLng(location2.lat, location2.lon);
              var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
              var kmdistance = (miledistance * 1.609344).toFixed(1);

              document.getElementById('results').innerHTML = '<strong>Address 1: </strong>' + location1.address + '<br /><strong>Address 2: </strong>' + location2.address + '<br /><strong>Distance: </strong>' + miledistance + ' miles (or ' + kmdistance + ' kilometers)';
          }
          catch (error)
          {
              alert(error);
          }
      }

      </script>
    </head>

    <body onload="initialize()">

      <form action="#" onsubmit="showLocation(); return false;">
        <p>
          <input type="text" name="address1" value="Address 1" class="address_input" size="40" />
          <input type="text" name="address2" value="Address 2" class="address_input" size="40" />
          <input type="submit" name="find" value="Search" />
        </p>
      </form>
      <p id="results"></p>

    </body>
  </html>

【问题讨论】：

标签： jquery html google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

包含 Google 地图 Javascript v3 的正确语法如下：

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>

【讨论】：

我试过了，但是对于上面的代码，我没有得到任何结果，但我没有收到问题中指出的那个消息。知道为什么
您没有任何结果，因为您的代码是 API v2 的一部分，而不是 API v3。阅读documentation了解更多信息。
谢谢..APIv3 的任何示例..请告诉我。将通过文档
geocodezip.com 包含许多 Google Maps API V3 的示例。查看一个示例的来源以获取代码。 This 是一个地理编码示例。