Javascript 响应性谷歌地图

下面的代码用于在我的网站上显示谷歌地图上的位置。它在桌面视图上运行良好，但对于响应性没有帮助。请帮助我调整缩放和大小，使其响应。我已附上这些图片以供参考

地图上有四个标记。3个是簇，1个是正常标记。请帮助我调整视图，使我的所有标记在一个框架内可见。如果你能在点击标记时帮助我平滑缩放，那也会非常有帮助

多谢各位

/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
高度：400px；
宽度：100%；
保证金：0；
填充：0；
}

div id=“map”>

此链接将帮助您

---

不要使用即时地图的图像。地图具有调整大小功能，请在window.resize事件中调用它。

似乎您正在尝试向正在做/已经做的教程中添加内容。明确地你应该先自己尝试不同的事情，比如已经有大量的数据可以做这件事。然后，阅读，然后在这里提问。因此，这不是一个研究替代方案……可能是

function initMap() {

  // Create a new StyledMapType object, passing it an array of styles,
  // and the name to be displayed on the map type control.
  var styledMapType = new google.maps.StyledMapType(

[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
],
      {name: 'Styled Map'});
function initialize() {

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

// Resize stuff...
google.maps.event.addDomListener(window, "resize", function() {
   var center = map.getCenter();
   google.maps.event.trigger(map, "resize");
   map.setCenter(center); 
});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.

    var myLatlng = {lat: 29.687978, lng: 0.00};

  var map = new google.maps.Map(document.getElementById('map'), {
    center: myLatlng,
    zoom: 3,
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
              'styled_map']
    }
  });

    var marker = locations.map(function(location, i) {
      return new google.maps.Marker({
      position: location,
      animation: google.maps.Animation.DROP,
      title: 'Click to zoom' 

    });

    marker.addListener('click', toggleBounce);
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, marker,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

  //Associate the styled map with the MapTypeId and set it to display.
   map.mapTypes.set('styled_map', styledMapType);
   map.setMapTypeId('styled_map');
   map.setOptions({ minZoom: 2, maxZoom: 15 });

}


var locations = [
  {lat: 19.013916, lng: 73.012211},
  {lat: 18.995356, lng: 72.838849},
  {lat: 42.365981, lng: -71.051223},
  {lat: 18.558610, lng: 73.883862},
]

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}