0

我正在尝试使用 Google Maps API 在我的地图上添加标记。我在脚本标签中的 application.html.erb 中调用 addMarker 函数，但我无法弄清楚为什么当我的 map.js 中存在该函数时未定义该函数。

看看下面的代码，我确信这是显而易见的，但我是 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>
4

1 回答 1

1

因为您的添加标记功能是在文档就绪功能中编写的。从文档就绪范围中删除该功能并将其放在外面。

于 2013-07-01T10:44:43.353 回答