How to display Google Map in HTML website using Latitude & Longitude

The following is the simple code will help you to embed a Google map of any location in your Website or Blog.

You required a Google Maps API (Javascript API) to do this as given under.

<script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_AP_KEY_HERE&callback=initMap&libraries=&v=weekly"
      defer
    ></script>

Now replace YOUR_AP_KEY_HERE with your API Key provided by Google Maps and paste this code in the following script.

<!DOCTYPE html>
<html>
<head>
    <title>Add Map</title>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPrZycYnWKdvxHkW2lWVT1MMwrnMIfiAU&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/css">
      #map {
        height: 400px;
        width: 100%;
        border: 2px solid #000;
      }
    </style>
    <script>
      // Initialize and add the map
      function initMap() {
        // The location
        const bizLocation = { lat: 16.9593558, lng: 82.23099069999999 };
        // The map, centered at Location
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 15,
          center: bizLocation,
          //mapTypeId: google.maps.MapTypeId.HYBRID
        });
        // The marker, positioned at Location
        const marker = new google.maps.Marker({
          position: bizLocation,
          map: map,
          title: "YOUR BUSINESS NAME",
          animation:google.maps.Animation.BOUNCE
        });
      }
    </script>
</head>
<body>
    <h3>My Google Maps Demo</h3>
    
    <div id="map"></div>
</body>
</html>

Thanking you.

Happy Coding...