在Google Maps Javascript外部链接上显示标记

Question

在Google地图javascript上，地图左下方有一个可点击的链接，其中包含Google图标＆＃34;在Google地图上查看此区域＆＃34;。此链接会打开Goog​​le地图，但它只会以提供的纬度/经度为中心，并且不会显示我为API提供的标记。

                    function initMap() {
                    map = new google.maps.Map(document.getElementById('gmap_holder'), {
                        center: {lat: 37.423021, lng: -122.083739},
                        zoom: 15
                    });

                    map.setOptions({draggable: false, zoomControl: true, scrollwheel: false, disableDoubleClickZoom: true});


                    var coord = new google.maps.LatLng(37.423021, -122.083739);

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

                }

我知道有一种方法可以生成一个显示标记的网址，例如http://maps.google.com/maps?q=loc:36.26577,-92.54324，但我似乎无法从API中找到答案。

Answer 1

应该是：

function initMap() {
  var center = {lat: 37.423021, lng: -122.083739};

  var map = new google.maps.Map(document.getElementById('gmap_holder'), {
    zoom: 4,
    center: center
  });

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

  // you can set other options
}

更多信息：

1. 您可以在此处找到所需的属性：MapOptions

2. 示例：Simple markers

修改 @Sefam，我编辑了你的代码，因为我看到了一些与示例不同的东西。我编辑了我的答案，以显示差异在哪里。

function initMap() {
   var map = new google.maps.Map(document.getElementById('gmap_holder'), {
      center: {lat: 37.423021, lng: -122.083739}, // or try:
      // center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739),
      zoom: 15
   });

   map.setOptions({draggable: false, zoomControl: true, scrollwheel: false, disableDoubleClickZoom: true}); 

   var coord = new google.maps.LatLng(37.423021, -122.083739); // here you created instance of LatLng's class

   var marker = new google.maps.Marker({
      position: coord, // instead this try:
      //position: {lat: 37.423021, lng: -122.083739}, // here is a difference;  or try:
      //position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739),
      map: map
   });
}

如果它不起作用，请检查您的api密钥和回调函数：

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

同时检查css规则：您为地图设置了height吗？

此外，我想解释为什么我提供了两种创建属性center和position的变体：

center: {lat: 37.423021, lng: -122.083739}
center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739)

position: {lat: 37.423021, lng: -122.083739}
position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739)

在我的练习中，我使用了两种变体，两种都有效。

尝试组合：

center: {lat: 37.423021, lng: -122.083739} //for var map
position: {lat: 37.423021, lng: -122.083739} //for var marker

center: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) //for var map
position: new google.maps.LatLng(lat: 37.423021, lng: -122.083739) //for var marker

希望我编辑的答案可以帮助您找到解决方案。 如果我的回答没有帮助，请从控制台发布错误消息。使用错误消息更容易找到解决方案。

PS。当我需要创建Google Map时，我总是使用Google Maps API示例，它始终有效。