如何在谷歌地图针上添加标记

Question

我正在尝试向我的谷歌地图添加一个标记，但由于某种原因它没有显示出来。地图本身工作正常，但标记不会显示。我正在关注 google api 文档，并且所有其他可自定义的功能都可以正常工作。我也尝试过手动添加 Lon 和 Lat，但没有。我确定它是我忽略的一些简单的东西，但我不确定它是什么，任何帮助将不胜感激。提前致谢。

<% if @location.latitude.present? && @location.longitude.present? %>
    <script>
    function initMap() {

    // Specify features and elements to define styles.
    var styleArray = [
      {
        featureType: "all",
        stylers: [
         { saturation: -80 }
        ]
      },{
        featureType: "road.arterial",
        elementType: "geometry",
        stylers: [
          { hue: "#00ffee" },
          { saturation: 50 }
        ]
      },{
        featureType: "poi.business",
        elementType: "labels",
        stylers: [
          { visibility: "off" }
        ]
      }
    ];

    var myLatLng = {lat: <%= @location.latitude %>, lng: <%= @location.longitude %>};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      // styles: styleArray,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: <%= @location.name %>
    });
    }

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?   signed_in=true&callback=initMap">
    </script>
    <div id="map"></div>
   <% end %>

Answer 1

好像你没有设置位置

 var marker = new google.maps.Marker({
  position: markerPos,
  map: map,
  title: <%= @location.name %>
});

markerPos .. 的值在哪里？

try with myLatLng


var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: <%= @location.name %>
});

仅用于调试尝试不使用 location.name

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map
});

Answer 2

问题出在这里：

var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: <%= @location.name %>
    });

您正在输出 location.name，但它需要包含在带引号的字符串中。现在，如果您查看源代码并看到客户端代码，我认为它看起来像：

var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: Hello World
    });

您可能遇到了 JS 错误。试试看：

var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: '<%= @location.name %>'
    });