Ionic V3中Google Maps JavaScript SDK多页面地图异常问题咨询

Absolutely, I’ve run into this exact issue before with Ionic V3 and Google Maps JS SDK! The good news is you absolutely can have multiple map pages in the same app—the problem usually boils down to how map instances are initialized and cleaned up between page navigations. Let’s break down the common causes and fixes:

Common Causes of the Glitch #

• The map initializes before the second page’s DOM is fully rendered
• Uncleaned map instances/listeners from the first page cause memory leaks
• CSS conflicts or incorrect container dimensions break map rendering

Step-by-Step Fixes #

1. Initialize Maps Only After Page DOM is Ready #

Don’t use ngOnInit to initialize your map—instead, use Ionic’s ionViewDidEnter hook. This ensures the page’s DOM (including the map container) is fully loaded before the map tries to render:

private mapInstance: google.maps.Map;
private markers: google.maps.Marker[] = [];

ionViewDidEnter() {
  this.initMap();
}

private initMap() {
  const mapContainer = document.getElementById('map-container');
  // Only initialize if container exists and no map instance is already created
  if (mapContainer && !this.mapInstance) {
    this.mapInstance = new google.maps.Map(mapContainer, {
      center: { lat: 37.7749, lng: -122.4194 },
      zoom: 12
    });
    // Add markers or other map logic here
    const marker = new google.maps.Marker({
      position: { lat: 37.7749, lng: -122.4194 },
      map: this.mapInstance,
      title: 'Test Marker'
    });
    this.markers.push(marker);
  }
}

2. Clean Up Map Resources When Leaving a Page #

If you don’t destroy the previous map instance, it will linger in memory and interfere with the next map. Use ionViewWillLeave to clean up:

ionViewWillLeave() {
  if (this.mapInstance) {
    // Remove all markers from the map
    this.markers.forEach(marker => marker.setMap(null));
    this.markers = [];
    // Destroy the map instance
    this.mapInstance = null;
    // Clear the container to avoid residual rendering issues
    const mapContainer = document.getElementById('map-container');
    if (mapContainer) {
      mapContainer.innerHTML = '';
    }
  }
}

3. Ensure Your Map Container Has Explicit Dimensions #

Gray lines or broken street views often happen when the map container doesn’t have a defined size. Add CSS to fix this:

#map-container {
  width: 100%;
  /* Adjust height to fit your layout—e.g., avoid header/footer */
  height: calc(100vh - 56px); 
}

If you’re using ion-content, disable scrolling to prevent layout conflicts:

<ion-content scroll="false">
  <div id="map-container"></div>
</ion-content>

4. Load Google Maps SDK Only Once #

Don’t load the Maps script in every page—load it once when your app starts. Add this to app.component.ts:

platform.ready().then(() => {
  const script = document.createElement('script');
  script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY`;
  script.async = true;
  script.defer = true;
  document.body.appendChild(script);
});

Extra Debugging Tips #

• Check the browser console for errors (look for API key issues, missing container references, or script load failures)
• Test in a desktop browser first to rule out device-specific WebView quirks

Following these steps fixed the gray lines and missing markers for me when working with multiple map pages in Ionic V3. Hope it works for you too!

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