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="" 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:

    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


  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.

Post your Answer