Question

How can I use Javascript and CSS to keep my Google Maps Icon, Infowindow, and Map Layer centered? I've seen instances where the icon stays centered but the map layer does not... I want to be able to set my map's width to 100% so that it fills up the entire width of the browser window, while always keeping the map icon, infowindow, and map layer centered.

Example if someone resizes their browser from 1500px wide to say 800px wide the map icon, infowindow, and map layer should stay centered at all times.

Listed below is my working html, javascript, and css for my current map... so given this code how would I make the correct adjustments to keep my map icon, infowindow, and map background layer centered.

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

Google Maps – Keep Icon, Infowindow, and Map Layer centered

2 个答案: