无法在Google地图中显示2个标记，仅显示单个标记

Question

我想在Google地图中显示2个标记，但地图中仅填充1个标记，另一个未填充。如何在地图上显示2个标记，我想我错过了为第二个标记更改变量名的方法，但是找不到我做错了的地方。

代码

function initMap() {
            var myLatLng = new google.maps.LatLng(22.803702, 86.189567),
                myOptions = {
                    zoom: 14,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                },
                map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
                marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon:'http://maps.google.com/mapfiles/ms/micons/green.png',
                    label: "1",
                });
            var contentString = 'marker 1';

            var myLatLng2 = new google.maps.LatLng(22.111111, 86.189687),
                myOptions = {
                    zoom: 14,
                    center: myLatLng2,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                },
                map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
                marker1 = new google.maps.Marker({
                    position: myLatLng2,
                    map: map,
                    icon:'http://maps.google.com/mapfiles/ms/micons/green.png',
                    label: "2",
                });
            var contentString2 = 'marker 2';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            var infowindow2 = new google.maps.InfoWindow({
                content: contentString2
            });
            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });
            marker.addListener('click', function () {
                infowindow.open(map, marker1);
            });
            marker.setMap(map);
            marker1.setMap(map);
        }

Answer 1

向其中添加第一个标记后，您将创建一个新的map。

var myLatLng = new google.maps.LatLng(22.803702, 86.189567),
    myOptions = {
        zoom: 14,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    // first map instantiation <================================================== *** 
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon:'http://maps.google.com/mapfiles/ms/micons/green.png',
        label: "1",
    });
var contentString = 'marker 1';

var myLatLng2 = new google.maps.LatLng(22.111111, 86.189687),
    myOptions = {
        zoom: 14,
        center: myLatLng2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    // second map instantiation <================= remove this ==================== ***
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),

删除该代码。

proof of concept fiddle

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>

<script type="text/javascript">
  function initMap() {
    var myLatLng = new google.maps.LatLng(22.803702, 86.189567),
      myOptions = {
        zoom: 7,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
      marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
        label: "1",
      });
    var contentString = 'marker 1';

    var myLatLng2 = new google.maps.LatLng(22.111111, 86.189687),
      marker1 = new google.maps.Marker({
        position: myLatLng2,
        map: map,
        icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
        label: "2",
      });
    var contentString2 = 'marker 2';
    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });
    var infowindow2 = new google.maps.InfoWindow({
      content: contentString2
    });
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
    marker.addListener('click', function() {
      infowindow.open(map, marker1);
    });
    marker.setMap(map);
    marker1.setMap(map);
  }
  google.maps.event.addDomListener(window, 'load', initMap);
</script>
<div id="map-canvas"></div>