谷歌地图中心选项不起作用

我刚刚开始使用谷歌地图API的新体验。我正在尝试了解它的工作原理，我通常会在论坛上理解或找到答案。也许我错过了什么？中心不工作。谷歌地图标记始终显示在左上角请帮助我，提前谢谢你！

在这里演示

JS代码：

    var locations = [
      ['<h4>Akouda</h4>', 35.825603, 10.608394999999973],
      ['<h4>Coogee Beach</h4>', 35.874674, 10.571809],
      ['<h4>Hammem Sousse</h4>', 35.886399, 10.591507],
      ['<h4>Kalaa Kebira</h4>', 35.869824, 10.535237]      
    ];
    // Setup the different icons and shadows
    var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
    var icons = [
      iconURLPrefix + 'red-dot.png',
      iconURLPrefix + 'green-dot.png',
      iconURLPrefix + 'blue-dot.png',
      iconURLPrefix + 'orange-dot.png',
      iconURLPrefix + 'purple-dot.png',
      iconURLPrefix + 'pink-dot.png',      
      iconURLPrefix + 'yellow-dot.png'
    ]
    var iconsLength = icons.length;
    var latlng = new google.maps.LatLng(35.874674, 10.571809);
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(35.874674,10.571809),
        zoom: 10,     
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      panControl: false,
      zoomControlOptions: {
         position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });

    var markers = new Array();
    var iconCounter = 0;
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter]
      });
      markers.push(marker);
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= iconsLength) {
        iconCounter = 0;
      }
    }
    $('#myMapModal').on('shown.bs.modal', function () {
    google.maps.event.trigger(map, 'resize');
});
map.setCenter(new google.maps.LatLng(35.874674,10.571809));

    map.setZoom(10);

目录

    <a href="#myMapModal" data-toggle='modal'> <button onclick="resize();" style="text-align: right;"  class="btn btn-default">Voir sur carte</button></a>
<div class="modal fade" id="myMapModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div id="map" style="width: 500px; height: 400px;"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->