響應谷歌地圖

Question

下面的代碼用於顯示我的網站上谷歌地圖上的位置。它在桌面視圖上正常工作，但對於響應不起作用。善良幫助我調整縮放和大小，並使其響應。我附上了圖片以供參考。

地圖上有四個標記。 3個是簇，一個是正常標記。請幫助我調整視圖，以便我的所有標記在一幀中可見。如果您點擊標記時可以幫助我平穩縮放，這也會非常有幫助。

謝謝。

SCREENSHOT FOR DESKTOP VIEW

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); 
    } 
} 

/* Always set the map height explicitly to define the size of the div 
* element that contains the map. */ 
#map { 
    height: 100%; 
} 
/* Optional: Makes the sample page fill the window. */ 
html, body { 
    height: 400px; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

div id="map"></div> 


<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> 

Answer 1

此鏈接會幫助你。 stackoverflow/googlemap.resize

不使用圖像即時的地圖。地圖調整了函數大小，在window.resize事件中調用它。