Building Interactive Maps with Google Maps API

This example demonstrates how to display a map on a web page and add a marker at a specific location using JavaScript.

HTML Structure

This is a basic HTML structure for the web page. It includes a <div> element with the id attribute set to “map”. This <div> element will serve as the container for displaying the map. The CSS code inside the <style> tag sets the height of the map container to 400 pixels.

<!DOCTYPE html>
<html>
<head>
  <title>Google Maps API Example</title>
  <style>
    /* Set the height of the map container */
    #map {
      height: 400px;
    }
  </style>
</head>
<body>
  <!-- Create a container for the map -->
  <div id="map"></div>

  <!-- JavaScript code goes here -->
  <!-- Google Maps API is loaded at the end -->
</body>
</html>

Javascript Code

Inside the <script> tag, you define a JavaScript function called initMap(). This function is responsible for initializing and displaying the map. It performs the following steps:

  • Defines the coordinates for the center of the map using latitude and longitude values.
  • Creates a new instance of the google.maps.Map class, passing in the id of the map container ('map') and an object containing the initial map options. The center option sets the map’s center coordinates, and the zoom option determines the initial zoom level.
  • Creates a marker using the google.maps.Marker class, specifying its position as the center coordinates and associating it with the map. You can also provide an optional title for the marker.
<script>
    // Initialize and display the map
    function initMap() {
      // Specify the coordinates of the center of the map
      var center = { lat: 37.7749, lng: -122.4194 };

      // Create a new map instance
      var map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 12 // Adjust the zoom level as desired
      });

      // Add a marker to the map
      var marker = new google.maps.Marker({
        position: center,
        map: map,
        title: 'San Francisco' // Optional title for the marker
      });
    }
</script>

Loading the Google Maps JavaScript API

At the end of the HTML file, you load the Google Maps JavaScript API by including a <script> tag with the src attribute pointing to the API URL. Replace YOUR_API_KEY with your actual Google Maps API key. The callback=initMap parameter ensures that the initMap() function is called once the API is loaded.

When the web page is loaded, the JavaScript code executes, initializing the map and adding a marker to it based on the provided coordinates. The map will be displayed within the <div id="map"></div> container.

<!-- Load the Google Maps JavaScript API with your API key -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

You can further customize this code by adjusting the map options, adding more markers, or incorporating additional features provided by the Google Maps API, such as overlays, geolocation, or directions.

Leave a Comment

Your email address will not be published. Required fields are marked *