如何在 Google 地图脚本中插入简单标记？答案

【问题标题】：How do I insert a simple marker in a Google Maps script?如何在 Google 地图脚本中插入简单标记？
【发布时间】：2015-11-10 16:37:24
【问题描述】：

我有一个看起来像这样的谷歌地图脚本（它位于<head></head> 标签之间）：

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function initialize() {
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
    center: new google.maps.LatLng(51.500891, 5.439642),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

以下是<body></body>标签之间：

<div id="map"></div>

所以我想在这里添加一个红色标记：https://developers.google.com/maps/documentation/javascript/examples/marker-simple

【问题讨论】：

您是否尝试过您链接到的示例中的代码？你有什么问题？

标签： javascript html google-maps google-maps-api-3 marker

【解决方案1】：

从您链接到的示例中获取代码：

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

将其添加到您的地图（并将位置更改为可见）对我有用：

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(51.500891, 5.439642),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({
    position: mapOptions.center,
    map: map,
    title: 'Hello World!'
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map"></div>

【讨论】：