How to show location using google map in JavaScript?

To display a location using Google Maps in PHP, you can use the Google Maps JavaScript API. Here's a basic example of how you can achieve this:

1. Get Google Maps API Key: First, you need to obtain an API key from the Google Cloud Console. You can follow the instructions provided by Google to create a project and generate an API key.

2. Embed Google Maps JavaScript API: In your HTML file (or PHP file if you're using PHP to generate HTML), include 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>
   

    

3. Replace YOUR_API_KEY with your actual API key.

4. Create a Container for the Map: Create a <div> element with an ID where you want to display the map:

   <div id="map"></div>
   

5. Initialize the Map: Add JavaScript code to initialize the map and display the desired location:

   <script>
   function initMap() {
       // Coordinates for the location you want to display
       var location = { lat: 37.7749, lng: -122.4194 }; // For example, San Francisco, CA
   
       // Create a new map centered at the specified location
       var map = new google.maps.Map(document.getElementById('map'), {
           zoom: 10, // Zoom level
           center: location // Center the map at the specified location
       });
   
       // Add a marker at the specified location
       var marker = new google.maps.Marker({
           position: location,
           map: map
       });
   }
   </script>
   

    

6. Adjust the location object to the coordinates of the location you want to display.

7. View the Map: Open your HTML (or PHP) file in a web browser, and you should see the Google Map displayed with the specified location.