It seems like you are trying to embed a Google Map with a marker using the static map API. However, as of my last knowledge update in January 2022, Google requires an API key for using the static map API. If you're experiencing issues, it's possible that Google has updated its policies or requirements since then.
Here's a modified version of your code with an API key:
<!DOCTYPE html>
<html>
<head>
<title>Google Map with Marker</title>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=37.7749,-122.4194&zoom=12&size=400x400&markers=color:red%7C37.7749,-122.4194&key=YOUR_API_KEY" alt="Map with Marker">
</div>
</body>
</html>
In this example, I'm using an <img> tag to display a static map image generated by the Google Maps static maps API. You can adjust the center coordinates, zoom, size, and marker details by modifying the src attribute of the <img> tag.
Replace YOUR_API_KEY with your actual Google Maps API key. Make sure you have enabled the Static Maps API in your Google Cloud Console and that your API key is properly configured to use this service.
If you are still having issues, I recommend checking the latest documentation on the Google Maps API website for any changes or updates to their usage policies.
There are several alternative map providers that offer mapping services without requiring API keys. One popular option is the Leaflet library, which is an open-source JavaScript library for interactive maps. Here's an example of how you can use Leaflet to display a map with a marker:
<!DOCTYPE html>
<html>
<head>
<title>Map with Marker (Leaflet)</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
var map = L.map('map').setView([37.7749, -122.4194], 12); // Coordinates and zoom level
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
var marker = L.marker([37.7749, -122.4194]).addTo(map);
</script>
</body>
</html>
In this example, we're using the Leaflet library to create an interactive map. The map is centered at [37.7749, -122.4194], and a marker is added at the same location. The map tiles are sourced from OpenStreetMap, and no API key is required.
Feel free to explore other map providers like Mapbox, HERE, or Bing Maps, which may offer similar services with varying levels of features and requirements. Always check the terms and conditions of the chosen map provider to ensure compliance.
You can change the view of the map to a satellite view using Leaflet by switching to a different tile layer that provides satellite imagery. Here's how you can modify the example to display a satellite view:
<!DOCTYPE html>
<html>
<head>
<title>Satellite Map View (Leaflet)</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
var map = L.map('map').setView([37.7749, -122.4194], 12); // Coordinates and zoom level
L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 19,
subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);
var marker = L.marker([37.7749, -122.4194]).addTo(map);
</script>
</body>
</html>
In this example, I've changed the L.tileLayer URL to a Google Maps satellite tile layer. Please note that this approach uses Google's tiles, so it might be subject to terms and conditions imposed by Google. If you're concerned about compliance, you might explore other map providers that offer satellite imagery.
Remember that map provider URLs and availability might change, so it's always a good idea to consult the documentation or terms of use of the provider you're using.