Google Maps API多地图多PlaceID调用异常：仅首地图显示标记

Hey there, let's work through this dual-map marker issue you're hitting with PlaceID instead of lat/lng. It sounds like the problem boils down to scope conflicts or unbound map instances when rendering multiple maps—since the only difference is the map_(group) parameter, we need to make sure each map and its markers are fully isolated from one another.

Here's how to fix it step by step: #

1. Isolate Each Map Instance & Variables

The biggest culprit here is likely shared global variables (like a generic map variable) that get overwritten when the second map loads. We need to tie every part of the map and its markers directly to the unique group identifier.

2. Bind PlaceID Resolution to the Correct Map

When resolving PlaceIDs to coordinates (using something like the Google Maps Geocoder), you have to explicitly tell the marker which map it should attach to—don't rely on a global map reference that might be overwritten.

Modified Code Example #

Here's a revised version of your code that addresses both issues:

<?php
// Assume $groups is your list of map groups
foreach ($groups as $group): ?>
  <!-- Unique map container for each group with defined dimensions -->
  <div id="map_<?= $group; ?>" style="width: 100%; height: 400px;"></div>

  <?php $markers = $data->getMarkers($group);
  if ($markers): ?>
    <script>
      // Unique initialization function per group
      function initMap_<?= $group; ?>() {
        // Create a map instance tied to this group's container
        const map = new google.maps.Map(document.getElementById('map_<?= $group; ?>'), {
          zoom: 12,
          center: { lat: 60.1699, lng: 24.9384 } // Default center, adjust as needed
        });
        const geocoder = new google.maps.Geocoder();
        const bounds = new google.maps.LatLngBounds(); // For auto-fitting all markers

        <?php foreach ($markers as $marker): ?>
          // Resolve PlaceID and attach marker to THIS map instance
          geocoder.geocode({ placeId: '<?= $marker['place_id']; ?>' }, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
              const marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                <?php if (!empty($marker['icon'])): ?>
                icon: '<?= $marker['icon']; ?>'
                <?php endif; ?>
              });
              bounds.extend(results[0].geometry.location);
              map.fitBounds(bounds); // Auto-adjust map to show all markers
            } else {
              console.error(`Failed to resolve PlaceID for group <?= $group; ?>: ${status}`);
            }
          });
        <?php endforeach; ?>
      }

      // Initialize the map when the page loads
      window.addEventListener('load', initMap_<?= $group; ?>);
    </script>
  <?php endif; ?>
<?php endforeach; ?>

Key Improvements: #

• Unique Identifiers: Every map container, initialization function, and internal map variable is tied to the $group value—no more overwriting global variables.
• Explicit Map Binding: Each marker is created with a direct reference to the map instance for its group, so it doesn't get attached to the wrong (or overwritten) map.
• Error Logging: Added console errors to help debug if a PlaceID fails to resolve.
• Auto-Fit Bounds: Ensures all markers for a group are visible on its map.

Quick Troubleshooting Checks: #

• Open your browser's dev tools console—look for errors like "map is undefined" or invalid PlaceID statuses.
• Double-check that each map container has a defined width and height (blank maps often come from missing CSS dimensions).
• If you're loading the Maps API asynchronously, make sure it's loaded before any of the initMap_* functions run.

内容的提问来源于stack exchange，提问作者Helppoelämä