javascript - 如何在两个地图中标记两个不同的位置是同一个页面？

Question

一个标记效果很好。我添加了第二个标记，但它没有出现。

我的代码中的错误在哪里？我敢肯定这很简单，但它不起作用。

Javascript

<script type="text/javascript">
    function initialize() {
       var mapOptions = {
               zoom: 15,
               center: new google.maps.LatLng(-12.99379, -38.52661),  
               mapTypeId: google.maps.MapTypeId.TERRAIN
           };
       var mapOptions2 = {
               zoom: 15,
               center: new google.maps.LatLng(-12.994898, -38.470841),  
               mapTypeId: google.maps.MapTypeId.TERRAIN
           };

       var map = new google.maps.Map(document.getElementById('location-canvas'),
                                       mapOptions);
       var map2 = new google.maps.Map(document.getElementById('location-canvas2'),
                                       mapOptions2);

       var marker = new google.maps.Marker({
                       map: map,
                       draggable: false,
                       position: new google.maps.LatLng(-12.99379, -38.52661)
           });

       var marker2 = new google.maps.Marker({
                       map: map,
                       draggable: false,
                       position: new google.maps.LatLng(-12.994898, -38.470841)
           });
    }

    google.maps.event.addDomListener(window, 'resize', initialize);
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

html

<div id='location-canvas' style='width:100%;height:200px;'></div> 
<div id='location-canvas2' style='width:100%;height:200px;'></div>

Answer 1

您将两个标记都放在“地图”上，该地图居中，因此 marker2 不在视图中。将 marker2 的定义更改为：

   var marker2 = new google.maps.Marker({
                   map: map2,
                   draggable: false,
                   position: new google.maps.LatLng(-12.994898, -38.470841)
       });