Uncaught ReferenceError：Google MapsでsaveDataが定義されていません

Question

私はthis tutorialに従っていますが、PHPとMySQLではなくRuby on Railsを使用しています。地図を右クリックして、マーカーを左クリックして情報ウィンドウのポップアップを作成し、情報ウィンドウに記入することができます。「&を閉じる」をクリックすると、エラーが表示されます。

Uncaught ReferenceError: saveData is not defined at HTMLInputElement.onclick (http://localhost:4000/#/user:1:1)onclick @ VM83 user:1

debuggerを使用すると、saveData()が決して呼び出されないことが確認できます。

情報ウィンドウに入力した情報を保存するにはどうすればよいですか？また、以下のmapController.jsの私の約束を入力した場合（正しいかなど）

物事私は

はStackOverflowの提案あたりのindex.htmlスクリプトタグから async deferを削除しようとしています。

再onclick='saveData()'、すべての順列で引用符と括弧を削除しました。

onclick='saveData()'という行が手動で入力されています。

私はstackOverflow提案ごとにinitiliaze関数内でsaveData関数を移動しました。

私はそれをinfowindow.saveData()（スタックオーバーフローの提案）に変更しました。

initialize（）の上にあるsaveData（）を移動しました。

スクリプト内_user.htmlするmapController.jsからコードを移動

等、ng-controllerを動かし、_user.htmlにDIVタグにネストされたdiv要素を含むいくつかの順列をonload='initialize()'を添加var S

に全てlet Sを変更タグ。

マイコード

<div ng-controller="mapController as map" id="map" style="width:100%; height:80vh;"></div> 

mapController.jsが

angular.module('tour').controller('mapController', function() { 
let self = this, 
marker, 
infowindow; 
function initialize() { 
    var latlng = new google.maps.LatLng(37.0902, -95.7129); 
    var options = { 
    zoom: 4, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map"), options); 
    var html = "<table>" + 
      "<tr><td>Title:</td> <td><input type='text' id='title'/> </td> </tr>" + 
      "<tr><td>Description:</td> <td><input type='text' id='description'/></td> </tr>" + 
      "<tr><td>Audio URL:</td> <td><input type='url' id='audio'/></td> </tr>" + 
      "<tr><td>Category:</td> <td><select id='category'>" + 
      "<option value='art' SELECTED>art</option>" + 
      "<option value='history'>history</option>" + 
      "<option value='literature'>literature</option>" + 
      "<option value='music'>music</option>" + 
      "</select> </td></tr>" + 
      "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>"; 
    infowindow = new google.maps.InfoWindow({ 
    content: html 
    }); 

    google.maps.event.addListener(map, "rightclick", function(event) { 
    marker = new google.maps.Marker({ 
     position: event.latLng, 
     map: map 
    }); 
    google.maps.event.addListener(marker, "click", function() { 
     infowindow.open(map, marker); 
    }); // end addListener 
    }); // end addListener 
} // end initialize function 

function saveData() { 
    var marker = { 
    title: escape(document.getElementById("title").value), 
    description: escape(document.getElementById("description").value), 
    audio: document.getElementById("audio").value, 
    category: document.getElementById("category").value, 
    longitude: marker.lng(), 
    latitude: marker.lat() 
    } 

    return $http({ 
    url: `${rootUrl}/users/:id/add_marker`, 
    method: 'POST', 
    data: {marker: marker}, 
    headers: { 
     'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('token')) 
    } 
    }) 
    .then(function(res){ 
    let markers = self.currentUser.markers; 
    let newMarker = res.config.data.marker; 
    markers.unshift(newMarker); // adds to beginning of array 
    }) 
    .catch(function(error){ 
    console.log('ERROR ~>', error); 
    }); 
} 

initialize(); 
}); 

Answer 1

window.saveData = function(){ /* your code here */ } 
onclick="window.saveData()"