0
我试图使用Google Maps API将标记添加到我的地图上。我在我的application.html.erb脚本标记中调用了addMarker函数,并且我不能确定为什么函数在我的map.js中存在时没有定义。未捕获的参考错误addMarker未定义
看看下面的代码,我相信这是显而易见的事,但我相信新的Web开发,并已在网上搜索了很久,无法看到我在做什么错。
非常感谢!
这是我map.js ......
$(document).ready(function(){
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
function addMarker(latitude, longitude, title) {
var marker = new google.maps.Marker({
position:new google.maps.LatLng(latitude, longitude),
map : map,
title : title
});
}
google.maps.event.addDomListener(window, 'load', initialize);
});
这是我application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>EventsMapper</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC74gnSe7p17ulcZUzgPJHxYurGg2bjRYg&sensor=false">
</script>
<script type="text/javascript">
$(function() {
// initMap();
//add here var items that converts ToDoItems to JSON, take out the var to make to global
<% Yoga.all.each do |item| %>
addMarker(<%=item.latitude%>, <%=item.longitude%>, '<%=item.name%>');
<%end%>
});
</script>
</head>
<body>
<!-- <input type="text" id="autocomplete"> -->
<div id='googlemap'>
<div id="map-canvas">
</div>
</div>
<%= yield %>
</body>
</html>
非常感谢,整理出来!如果你喜欢,请接受答案 – user2508443
。那它是如何工作:) –
我要接受它,但我不能工作如何,我都试过投了你的答案,但只会让我做,如果我有15声誉。有没有另一种方法来做到这一点? – user2508443