Instead of using the Google Maps JavaScript API (which renders an interactive map), you'll want to use the Google Static Maps API—it’s built specifically to return map images via a simple HTTP request. Here’s how to implement it:

Core Idea #

The Static Maps API accepts your latitude, longitude, zoom level, and other optional settings as query parameters in a URL, then sends back a PNG/JPG image of the exact map area you requested.

Step 1: Build the Static Map URL #

Here’s the basic structure of the URL you’ll use:

https://maps.googleapis.com/maps/api/staticmap?center=LATITUDE,LONGITUDE&zoom=ZOOM_LEVEL&size=WIDTHxHEIGHT&key=YOUR_API_KEY

• Replace LATITUDE and LONGITUDE with your target coordinates (e.g., 20.59,78.96).
• ZOOM_LEVEL uses the same integer value you were working with before (typically ranges from 1 for global views to 20 for street-level detail).
• size is mandatory—specify the image dimensions (like 600x400 for a 600px-wide, 400px-tall image).
• YOUR_API_KEY is your Google Cloud API key (make sure the Static Maps API is enabled for this key in the Google Cloud Console).

Step 2: Embed the Image in Your Page #

Option 1: Static HTML (for fixed coordinates)

If your coordinates don’t change, just drop an <img> tag pointing to your constructed URL:

<img src="https://maps.googleapis.com/maps/api/staticmap?center=20.59,78.96&zoom=10&size=600x400&key=YOUR_API_KEY" alt="Google Map of Target Location">

Option 2: Dynamic Generation (for variable coordinates/zoom)

If you need to generate the image URL on the fly (like your original initMap function did), use JavaScript to build the URL and set it as the source of an image element:

<div id="map-container">
  <img id="map-image" alt="Dynamic Google Map">
</div>

<script>
function initMapImage() {
  const latitude = 20.59;
  const longitude = 78.96;
  const zoom = 10;
  const size = "600x400";
  const apiKey = "YOUR_API_KEY";
  
  // Build the static map URL
  const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=${zoom}&size=${size}&key=${apiKey}`;
  
  // Update the image source
  document.getElementById('map-image').src = mapUrl;
}

// Run the function when the page loads
window.onload = initMapImage;
</script>

Optional Customizations #

You can tweak the image with extra parameters:

• maptype: Choose between roadmap (default), satellite, hybrid, or terrain.
• markers: Add labeled markers to specific points (e.g., &markers=color:red%7Clabel:A%7C20.59,78.96).
• scale: Use scale=2 to get high-DPI (retina) images for sharp displays.

Key Notes #

• Double-check that your API key has the Static Maps API enabled in the Google Cloud Console (it’s a separate API from the JavaScript Maps API).
• Review the Static Maps API usage limits to avoid unexpected costs.
• The size parameter has maximum dimensions (640x640 for the free tier, larger for paid plans).

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