在谷歌网站上创建的网站上的谷歌地图 Javascript API答案

【问题标题】：Google Maps Javascript API on a site created on google sites在谷歌网站上创建的网站上的谷歌地图 Javascript API
【发布时间】：2017-04-27 12:04:03
【问题描述】：

我想学习如何将以下代码添加到 google 站点并进行修改，以便将数据保存到 google 电子表格而不是 MySQL 数据库中。

我想学习如何做的两个部分是：

当我尝试在 html 框中插入代码“（未能加载外部 url js?key=YOUR%5fAPI%5fKEY&callback=initMap）”时，我在 google 网站上不断收到此错误
如何修改代码以将其链接到谷歌电子表格而不是 MySQL 数据库。

干杯

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>From Info Windows to a Database: Saving User-Added Form Data</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map" height="460px" width="100%"></div>
    <div id="form">
      <table>
      <tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>
      <tr><td>Address:</td> <td><input type='text' id='address'/> </td> </tr>
      <tr><td>Type:</td> <td><select id='type'> +
                 <option value='bar' SELECTED>bar</option>
                 <option value='restaurant'>restaurant</option>
                 </select> </td></tr>
                 <tr><td></td><td><input type='button' value='Save' onclick='saveData()'/></td></tr>
      </table>
    </div>
    <div id="message">Location saved</div>
    <script>
      var map;
      var marker;
      var infowindow;
      var messagewindow;

      function initMap() {
        var california = {lat: 37.4419, lng: -122.1419};
        map = new google.maps.Map(document.getElementById('map'), {
          center: california,
          zoom: 13
        });

        infowindow = new google.maps.InfoWindow({
          content: document.getElementById('form')
        })

        messagewindow = new google.maps.InfoWindow({
          content: document.getElementById('message')
        });

        google.maps.event.addListener(map, 'click', function(event) {
          marker = new google.maps.Marker({
            position: event.latLng,
            map: map
          });


          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
          });
        });
      }

      function saveData() {
        var name = escape(document.getElementById('name').value);
        var address = escape(document.getElementById('address').value);
        var type = document.getElementById('type').value;
        var latlng = marker.getPosition();
        var url = 'phpsqlinfo_addrow.php?name=' + name + '&address=' + address +
                  '&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng();

        downloadUrl(url, function(data, responseCode) {

          if (responseCode == 200 && data.length <= 1) {
            infowindow.close();
            messagewindow.open(map, marker);
          }
        });
      }

      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request.responseText, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing () {
      }

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

【问题讨论】：

你能解释一下a google site是什么
至于 (2) - 你研究过它完全吗？
你生成api密钥了吗？
您好，我所说的谷歌网站是指我在谷歌网站服务上创建的网站。 2. 是的，我已经创建了 api 密钥。

标签： javascript html mysql

【解决方案1】：

您只需要在src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 行上替换“YOUR_API_KEY” 使用您生成的 api 密钥。没什么太难的，文档上也说了

【讨论】：

我希望这是唯一的问题。我已经这样做了，但问题是它一直显示上述错误。