Integrating Google Maps into HTML: A Comprehensive Guide

    html

    Google Maps provides an API that enables developers to embed maps directly into web pages. This tutorial will guide you through the process step by step.

    1. Setting Up an API Key

    Before embedding Google Maps, you need to obtain an API key from Google Cloud Platform.

    1. Navigate to Google Cloud Console.
    2. Create a new project.
    3. Navigate to the “API & Services” > “Library”.
    4. Search for “Maps JavaScript API” and enable it.
    5. Click on "Credentials" from the left sidebar, then click on "Create Credentials" and choose "API Key".
    6. Note down your API key.

    2. Integrating Google Maps into HTML

    Start by creating an HTML file.

    <!DOCTYPE html>
<html>
<head>
    <title>My Google Map</title>
</head>
<body>

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
    function initMap() {
        var options = {
            zoom: 8,
            center: {lat: 37.7749, lng: -122.4194} 
        }

        var map = new google.maps.Map(document.getElementById('map'), options);
    }
</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

</body>
</html>

    3. Displaying the Map

    When you open the HTML file in a browser, you should see a map centered on San Francisco with a zoom level of 8. The map should fill the full width of the browser window and have a height of 400 pixels.

    4. Adding a Marker

    You might want to add a marker to point out a specific location. To do this, you can add the following code inside the initMap function, below the line that creates the map:

    var marker = new google.maps.Marker({
    position: {lat: 37.7749, lng: -122.4194}, 
    map: map
});

    This will place a marker on San Francisco.

    5. Conclusion

    You've successfully embedded Google Maps into your HTML page and added a marker. The Google Maps JavaScript API provides many more features, such as custom styles, info windows, and event listeners. You can explore the official documentation to delve deeper into its capabilities.

    Remember to always restrict your API keys to avoid any misuse. You can set up domain restrictions to ensure that the key is only usable from your specific domain.