Google地图初始化不居中问题求助（附完整代码）

Hey there! I spotted the exact issue causing your map to load centered on the ocean instead of your marker—your map's initial center coordinate doesn't match the position of your popup.

Let me break it down clearly:

• You set your map's center to {lat: 21.9, lng: -157.8}
• But your popup marker is placed at 21.286891, -157.846388

These are two distinct locations, so when the map loads, it shows the center point you defined (which happens to be over the ocean) instead of zooming directly to your marker.

The Simple Fix #

You have two easy options to fix this, and I'll show you the more maintainable one:

Store your marker position in a single variable first, then reuse it for both the map center and the popup. This way, if you ever update the marker location later, you only have to change it in one place.

Here's the modified snippet of your initMap function:

function initMap() {
  definePopupClass();
  // Store your marker position in a reusable variable
  const markerPosition = new google.maps.LatLng(21.286891, -157.846388);
  
  map = new google.maps.Map(document.getElementById('map'), {
    center: markerPosition, // Use the same position for map center
    zoom: 10,
  });
  
  popup = new Popup(
    markerPosition, // Reuse the variable for the popup
    document.getElementById('content'));
  popup.setMap(map);
}

Full Corrected Code #

Here's the complete working code with the fix applied:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Creating a Custom Popup</title>
<style>
/* 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: 100%; margin: 0; padding: 0; }
/* The location pointed to by the popup tip. */
.popup-tip-anchor { height: 0; position: absolute; /* The max width of the info window. */ width: 200px; }
/* The bubble is anchored above the tip. */
.popup-bubble-anchor { position: absolute; width: 100%; bottom: /* TIP_HEIGHT= */ 8px; left: 0; }
/* Draw the tip. */
.popup-bubble-anchor::after { content: ""; position: absolute; top: 0; left: 0; /* Center the tip horizontally. */ transform: translate(-50%, 0); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: /* TIP_HEIGHT= */ 8px solid skyblue; }
/* The popup bubble itself. */
.popup-bubble-content { position: absolute; top: 0; left: 0; transform: translate(-50%, -100%); background-color: skyblue; padding: 5px; border-radius: 5px; font-family: sans-serif; overflow-y: auto; max-height: 60px; box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5); }
</style>
</head>
<body>
<div id="map"></div>
<div id="content">
Paddle Core Fitness!
</div>
<script>
var map, popup, Popup;
/** Initializes the map and the custom popup. */
function initMap() {
definePopupClass();
// Store marker position in a reusable variable
const markerPosition = new google.maps.LatLng(21.286891, -157.846388);
map = new google.maps.Map(document.getElementById('map'), {
center: markerPosition,
zoom: 10,
});
popup = new Popup(
markerPosition,
document.getElementById('content'));
popup.setMap(map);
}
/** Defines the Popup class. */
function definePopupClass() {
/**
* A customized popup on the map.
*
* @param {!google.maps.LatLng}position
* @param {!Element} content
* @constructor
* @extends {google.maps.OverlayView}
*/
Popup = function(position, content) {
this.position = position;
content.classList.add('popup-bubble-content');
var pixelOffset = document.createElement('div');
pixelOffset.classList.add('popup-bubble-anchor');
pixelOffset.appendChild(content);
this.anchor = document.createElement('div');
this.anchor.classList.add('popup-tip-anchor');
this.anchor.appendChild(pixelOffset);
// Optionally stop clicks, etc., from bubbling up to the map.
this.stopEventPropagation();
};
// NOTE: google.maps.OverlayView is only defined once the Maps API has
// loaded. That is why Popup is defined inside initMap().
Popup.prototype = Object.create(google.maps.OverlayView.prototype);
/** Called when the popup is added to the map. */
Popup.prototype.onAdd = function() {
this.getPanes().floatPane.appendChild(this.anchor);
};
/** Called when the popup is removed from the map. */
Popup.prototype.onRemove = function() {
if (this.anchor.parentElement) {
this.anchor.parentElement.removeChild(this.anchor);
}
};
/** Called when the popup needs to draw itself. */
Popup.prototype.draw = function() {
var divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
// Hide the popup when it is far out of view.
var display = Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000 ? 'block' : 'none';
if (display === 'block') {
this.anchor.style.left = divPosition.x + 'px';
this.anchor.style.top = divPosition.y + 'px';
}
if (this.anchor.style.display !== display) {
this.anchor.style.display = display;
}
};
/** Stops clicks/drags from bubbling up to the map. */
Popup.prototype.stopEventPropagation = function() {
var anchor = this.anchor;
anchor.style.cursor = 'auto';
['click', 'dblclick', 'contextmenu', 'wheel', 'mousedown', 'touchstart', 'pointerdown' ]
.forEach(function(event) {
anchor.addEventListener(event, function(e) {
e.stopPropagation();
});
});
};
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBp4smaJjQflG_wooY9rfd7EtaKcxv9TYY&callback=initMap">
</script>
</body>
</html>

Now when you load the map, it will automatically center on your popup marker—no more dragging required!

内容的提问来源于stack exchange，提问作者Lucy