Google Map信息窗口内容自动设置及标记点击滚动优化需求

Hey there! Let's work through your Google Maps questions and fix those behavior issues with practical code adjustments.

1. Automatically Setting InfoWindow Content #

You can easily set static or dynamic content for InfoWindows by attaching custom data to your marker objects. If you have multiple markers, this lets you assign unique content to each one without repeating code:

• Add a custom property (like customContent) to your marker when creating it
• When the marker is clicked, use this property to populate the InfoWindow

2. Fixing Map Position & InfoWindow Display #

Your core issues are preventing unwanted map centering, adjusting map position for bottom markers, and flipping the InfoWindow's display direction. Let's break down the fixes:

Key Fixes Overview #

• Disable auto-pan: Stop the map from shifting to center the marker when clicked
• Detect marker position: Check if the marker is near the map's bottom edge
• Adjust map view: Pan the map upward only when the marker is at the bottom
• Flip InfoWindow anchor: Make the InfoWindow appear below the marker (instead of above)

Modified Full Code #

Here's the updated code with all fixes applied:

JavaScript

function initMap() {
  var mapProp = {
    center: new google.maps.LatLng(52.922592, -1.474605),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), mapProp);
  
  // Example dynamic content (can be loaded from an array/API too)
  var markerContent = `
    <li class="list-group-item">
      <a id="exampleMenu1"><div class="context">Example 1</div></a>
    </li>
    <li class="list-group-item">
      <a id="exampleMenu2"><div class="example">Example 2</div></a>
    </li>
    <li class="list-group-item">
      <a id="exampleMenu3"><div class="example">Example 3</div></a>
    </li>
    <li class="list-group-item">
      <a id="exampleMenu4"><div class="example">Example 4</div></a>
    </li>
    <li class="list-group-item">
      <a id="exampleMenu5"><div class="example">Example 5</div></a>
    </li>
  `;

  // Create InfoWindow with auto-pan disabled
  var infowindow = new google.maps.InfoWindow({
    disableAutoPan: true, // Disable default map centering
    anchor: new google.maps.Point(0, 100) // Shift anchor to show InfoWindow below marker (adjust based on your marker size)
  });

  // Create marker with custom content attached
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(52.922592, -1.474605),
    map: map,
    icon: "http://www.codeshare.co.uk/images/blue-pin.png",
    animation: google.maps.Animation.DROP,
    customContent: markerContent // Attach content to marker
  });

  marker.addListener('click', function() {
    // Set InfoWindow content from the marker's custom data
    infowindow.setContent(this.customContent);
    
    // Get marker position in pixel coordinates
    var markerPixel = map.getProjection().fromLatLngToContainerPixel(this.getPosition());
    var mapHeight = document.getElementById('map').offsetHeight;
    
    // Check if marker is in the bottom 30% of the map
    if (markerPixel.y > mapHeight * 0.7) {
      // Pan map upward to bring marker to the top area
      var newCenter = map.getProjection().fromContainerPixelToLatLng(
        new google.maps.Point(markerPixel.x, mapHeight * 0.2)
      );
      map.panTo(newCenter);
    }
    
    // Open InfoWindow
    infowindow.open(map, this);
  });
}

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

CSS

#map {
  width: 100%;
  height: calc(100vh);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Adjust InfoWindow styling to fit the bottom anchor */
.gm-style .gm-style-iw-c {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  top: auto; /* Remove fixed top position */
  bottom: 20px; /* Position below the marker */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  background-color: white;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3);
}

.gm-style .gm-style-iw-t::after {
  display: none; /* Hide default InfoWindow arrow */
}

HTML

<div id="map"></div>
<!-- Replace the key parameter with your own API key -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

How It Works #

• Auto-set InfoWindow Content: We attach the content directly to the marker, so when clicked, we pull that content into the InfoWindow. For multiple markers, you can loop through an array and assign unique customContent to each.
• No Unwanted Centering: The disableAutoPan: true option stops the map from shifting when clicking top markers.
• Bottom Marker Handling: We convert the marker's LatLng to pixel coordinates, check if it's near the bottom, and pan the map upward to bring it to a visible top position.
• Bottom-Aligned InfoWindow: By adjusting the anchor property and CSS, we make the InfoWindow appear below the marker instead of above.

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