在谷歌網站上創建的網站上的Google Maps JavaScript API

我想了解如何將以下代碼添加到Google網站並進行修改，以便將數據保存到谷歌電子表格而不是MySQL數據庫中。在谷歌網站上創建的網站上的Google Maps JavaScript API

兩個部分，我想學習如何做是：

我不斷收到對谷歌網站上的這個錯誤，當我嘗試插入到HTML中的「代碼（無法加載外部URL js？key = YOUR％5fAPI％5fKEY & callback = initMap）「
如何修改代碼以將其鏈接到谷歌spredsheet而不是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>

來源

2017-04-27 ror sara

你能否澄清一下google的網站是什麼 –

至於（2） - 你是否研究過*** ***？ –

您是否生成api密鑰？ –

你就必須與你的生成API密鑰src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 更換就行了「YOUR_API_KEY」。沒什麼太難的，甚至可以在文檔上說

來源

2017-04-27 14:51:14

我希望這是唯一的問題..我已經這樣做了，但問題是它不斷顯示上述錯誤。 –

在谷歌網站上創建的網站上的Google Maps JavaScript API

回答

相關問題