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

我试图在我的谷歌地图上添加一个标记，但由于某些原因，它没有显示出来。地图本身工作正常，但标记不会显示。我遵循GoogleAPI文档，所有其他可定制功能都可以正常工作。我也尝试过手动添加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 %>

函数initMap（）{
//指定要定义样式的要素和图元。
var styleArray=[
{
featureType:“全部”，
样式：[
{饱和度：-80}
]
},{
功能类型：“道路.干线”，
elementType:“几何体”，
样式：[
{hue:#00ffee}，
{饱和：50}
]
},{
featureType:“poi.business”，
elementType:“标签”，
样式：[
{可见性：“关闭”}
]
}
];
var mylatng={lat:，lng:}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
//样式：样式数组，
中心：myLatLng
});
var marker=new google.maps.marker({
职位：myLatLng，
地图：地图，
标题：
});
}

看来您还没有确定位置

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

问题在于：

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

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

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

var marker=new google.maps.marker({
职位：myLatLng，
地图：地图，
标题：“”
});

很抱歉，在尝试排除故障时，我忘记删除该变量。它仍然不起作用。谢谢你的回复，不过，我在调试的时候试过了，但还是一无所获。我正在使用bing API密钥，不确定这是否与此有关？似乎没有，因为地图已显示。。最终你可以不用钥匙试试。。（用于测试）有一个警告：Google Maps API警告：NoApiKeys，但我认为这是由于使用了bing API键。你确定地图工作正常吗。？。。我不明白。。地图分区的宽度和高度。。。必须正确设置这些值。这也不起作用，我用标题“Hello World”直接试用了它……出于某种原因，它没有显示出来。听起来你把标记和信息窗口混淆了。正如您发现的，当您将鼠标悬停在标记上时，“title”属性就会显示出来。

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

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

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