谷歌地图——保持图标、信息窗口和地图层居中

Question

如何使用 Javascript 和 CSS 使我的 Google 地图图标、信息窗口和地图图层居中？我见过图标保持居中但地图图层不居中的情况......我希望能够将地图的宽度设置为 100%，以便它填满浏览器窗口的整个宽度，同时始终保持地图图标、信息窗口和地图图层居中。

例如，如果有人将浏览器的大小从 1500 像素宽调整为 800 像素宽，则地图图标、信息窗口和地图图层应始终居中。

下面列出的是我当前地图的工作 html、Javascript 和 CSS...因此，鉴于此代码，我将如何进行正确调整以使我的地图图标、信息窗口和地图背景图层居中。

HTML：

<div id="map-wrapper"> 
    <div id="map-canvas" data-lat="40.7484404" data-lng="-73.9856554" data-address="Empire+State+Bldg,+350+5th+Ave,+New+York,+NY+10118+United+States"></div>
</div>

JavaScript：

var mapID = document.getElementById('map-canvas');

var mapDataLat = mapID.getAttribute('data-lat');
var mapDataLng = mapID.getAttribute('data-lng');
var mapDataAddress = mapID.getAttribute('data-address');

function initialize() {


    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        zoom: 14,
        zoomControl: false,
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.DEFAULT
        },
        streetViewControl: false,
        scaleControl: false,
        overviewMapControl: false,
        center: new google.maps.LatLng(mapDataLat, mapDataLng)
    };

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

    var infoContent = '<div class="window-content"><h4>Empire State Building</h4><a href="https://www.google.com/maps/dir/Current+Location/' + mbDataMBAddress + '" target="_blank">Directions</a></p></div>';

    var infowindow = new google.maps.InfoWindow({
        content: infoContent
    });

    var icon = {
        path: 'M16.5,51s-16.5-25.119-16.5-34.327c0-9.2082,7.3873-16.673,16.5-16.673,9.113,0,16.5,7.4648,16.5,16.673,0,9.208-16.5,34.327-16.5,34.327zm0-27.462c3.7523,0,6.7941-3.0737,6.7941-6.8654,0-3.7916-3.0418-6.8654-6.7941-6.8654s-6.7941,3.0737-6.7941,6.8654c0,3.7916,3.0418,6.8654,6.7941,6.8654z',
        anchor: new google.maps.Point(16.5, 51),
        fillColor: '#FF0000',
        fillOpacity: 0.6,
        strokeWeight: 0,
        scale: 0.66
    };

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(mapDataLat, mapDataLng),
        map: map,
        icon: icon,
        title: 'marker'
    });


    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

CSS：

#map-canvas {
  min-width: 300px; /* I would want to remove this, so width is set to 100% */
  width: 100%;
  height: 300px;
  margin: 0 auto;
}

#map-canvas img {
  max-width: none;
}

Answer 1

您需要注册一个 DOM 侦听器，以便在调整窗口大小时使地图居中。

例如：

// Define a global center variable
var center = new google.maps.LatLng(mapDataLat, mapDataLng);

然后在你的initialize函数中，注册监听器

// Listen for window resize event
google.maps.event.addDomListener(window, 'resize', centerMap);

然后只需创建一个函数，将地图居中到其原始位置

function centerMap() {

    map.setCenter(center);
}

或者，如果您不需要特定的功能，您可以这样做：

google.maps.event.addDomListener(window, 'resize', function() {

    map.setCenter(center);
});

Answer 2

这是正确/重构的 Javascript 代码，用于始终保持地图图标和背景地图图层居中...

var mapID = document.getElementById('map-canvas');

var mapDataLat = mapID.getAttribute('data-lat');
var mapDataLng = mapID.getAttribute('data-lng');
var mapDataAddress = mapID.getAttribute('data-address');

function initialize() {


    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        zoom: 14,
        zoomControl: false,
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.DEFAULT
        },
        streetViewControl: false,
        scaleControl: false,
        overviewMapControl: false,
        center: new google.maps.LatLng(mapDataLat, mapDataLng)
    };

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

    var infoContent = '<div class="window-content"><h4>Empire State Building</h4><a href="https://www.google.com/maps/dir/Current+Location/' + mbDataMBAddress + '" target="_blank">Directions</a></p></div>';

    var infowindow = new google.maps.InfoWindow({
        content: infoContent
    });

    var icon = {
        path: 'M16.5,51s-16.5-25.119-16.5-34.327c0-9.2082,7.3873-16.673,16.5-16.673,9.113,0,16.5,7.4648,16.5,16.673,0,9.208-16.5,34.327-16.5,34.327zm0-27.462c3.7523,0,6.7941-3.0737,6.7941-6.8654,0-3.7916-3.0418-6.8654-6.7941-6.8654s-6.7941,3.0737-6.7941,6.8654c0,3.7916,3.0418,6.8654,6.7941,6.8654z',
        anchor: new google.maps.Point(16.5, 51),
        fillColor: '#FF0000',
        fillOpacity: 0.6,
        strokeWeight: 0,
        scale: 0.66
    };

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(mapDataLat, mapDataLng),
        map: map,
        icon: icon,
        title: 'marker'
    });


    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

google.maps.event.addDomListener(window, 'resize', initialize); // This is the key
google.maps.event.addDomListener(window, 'load', initialize);