使用Polymer 2.5与google-map 2.0.3时，<google-map-marker />组件不显示求助

Hey there, I’ve dealt with this exact issue before when working with Polymer 2.5 and google-map 2.0.3, so let’s break down the most common fixes that resolved it for me and other developers:

1. Verify API Key & Component Structure #

First, make sure your Google Maps API key is valid and properly attached to the <google-map> component. Also, ensure markers are nested directly inside the map element or explicitly bound to it via the map attribute—this is a super common oversight.

Example of correct structure:

<google-map 
  api-key="YOUR_VALID_GOOGLE_MAPS_API_KEY"
  latitude="37.7749" 
  longitude="-122.4194"
  zoom="12">
  <!-- Marker nested directly in the map -->
  <google-map-marker 
    latitude="37.7749" 
    longitude="-122.4194"
    title="San Francisco Marker">
  </google-map-marker>
</google-map>

If you need to place markers outside the map element, bind the map instance:

<google-map id="myMap" api-key="YOUR_KEY" ...></google-map>
<google-map-marker map="[[myMap]]" latitude="..." longitude="..."></google-map-marker>

2. Ensure Coordinates Are Valid Numbers #

Markers won’t render if latitude/longitude are strings, NaN, or out of valid ranges (-90 to 90 for latitude, -180 to 180 for longitude). Double-check your data bindings:

• If pulling from an API or local data, convert string values to numbers (e.g., Number(item.latitude) in your Polymer element’s script).
• Avoid typos like latitute instead of latitude—small mistakes break everything!

3. Confirm Correct Component Imports #

Make sure you’ve imported both google-map and google-map-marker in your element’s HTML. For Bower-based setups, the paths should look like this:

<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/google-map/google-map-marker.html">

If you’re using npm, adjust the paths to match your node_modules structure.

4. Check Google Maps API Compatibility #

google-map 2.0.3 relies on a specific version of the Google Maps JS API. Sometimes forcing a stable version fixes rendering issues. Add the api-url attribute to your <google-map> to specify the version:

<google-map 
  api-key="YOUR_KEY"
  api-url="https://maps.googleapis.com/maps/api/js?v=3.47&key=YOUR_KEY"
  ...>
</google-map>

Stick to versions compatible with Polymer 2.x—avoid the latest v4 releases, as they may break older components.

5. Debug Visibility & Asynchronous Data #

• CSS Issues: Inspect the marker element in your browser’s dev tools to check if it’s hidden (e.g., opacity: 0, display: none, or z-index too low). The marker’s DOM should exist even if it’s not visible on the map.
• Asynchronous Data: If markers are loaded from an API call, use dom-if or dom-repeat with restamp to ensure markers render only after data is available:

  <google-map id="myMap" api-key="YOUR_KEY" ...>
    <template is="dom-repeat" items="{{markers}}" restamp>
      <google-map-marker 
        latitude="{{item.lat}}" 
        longitude="{{item.lng}}">
      </google-map-marker>
    </template>
  </google-map>
  

  Also, listen for the google-map-ready event on the map element before loading markers to ensure the map is fully initialized.

6. Validate Google Cloud Console Settings #

• Make sure the Maps JavaScript API is enabled in your Google Cloud Console.
• Check that your API key has no restrictions blocking your development domain (e.g., localhost should be allowed if you’re testing locally).
• Look for error messages in the Cloud Console’s API logs—these often reveal issues like invalid keys or quota limits.

Quick Debug Tip #

Always check your browser’s console for errors! Common issues include:

• google is not defined: Means the Google Maps API failed to load (check key/network).
• Invalid API key errors: Verify your key is correct and enabled.

Try these steps one by one, and if you hit a specific error message, share it—I can help you dig deeper!

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