如何在谷歌地图脚本中插入一个简单的标记

How do I insert a simple marker in a Google Maps script?

本文关键字：一个 简单 谷歌地图 脚本 插入      更新时间：2023-09-26

我有一个谷歌地图脚本，它看起来像这样（它位于<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

以您链接到的示例中的代码为例：

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>

相关文章：