Open In App

How To Add Google Maps With A Marker to a Website

Improve
Improve
Like Article
Like
Save
Share
Report

Google Maps is a web mapping service developed by Google. It offers satellite imagery, street maps, 360° panoramic views of streets (Street View), real-time traffic conditions (Google Traffic), and route planning for traveling by foot, car, bicycle (in beta), or public transportation.

To add a Google Maps with a marker on a website there are three essential steps required:

  1. Create an HTML page
  2. Add a map with a marker
  3. Get an API key
  4. Step 1 : Creating an Html page.




    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #map {
            width: 100%;
            height: 400px;
            background-color: grey;
          }
        </style>
      </head>
      <body>
        <p>My Google Maps Demo</p>
        <div id="map"></div>
      </body>
    </html>

    
    

    Output :


    The given code describes the CSS that sets the size and color of the div. The style element sets the div size for your map.div is set to a height of 400 pixels, and width of 100% to display the map across the width of your web page.

    The code defines an area of the page for the Google map. The div appears as a grey block in the output, because the map has not been yet added.



    Step 2 : Adding map with a marker :




    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #map {
            height: 400px;
            width: 100%;
           }
        </style>
      </head>
      <body>
        <p>My Google Maps Demo</p>
        <div id="map"></div>
        <script>
          function initMap() {
            var test= {lat: -25.363, lng: 131.044};
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 4,
              center: test
            });
            var marker = new google.maps.Marker({
              position: test,
              map: map
            });
          }
        </script>
        <script async defer
        src=
        </script>
      </body>
    </html>

    
    

    Explanation :

    • In the code , the script loads the API from the specified URL.
    • The callback parameter executes the initMap function after the API loads.
    • The async attribute allows the browser to continue rendering the rest of the page while the API loads.
    • The key parameter contains the API key.
    • Type your api key inside “key = “.

      The code contains the initMap function that initializes and adds the map when the web page loads.Script tag can be used to add your own javascript.

    • The code constructs a new Google maps object, and adds properties to the map including the center and zoom level.
    • In the code below, new google.maps.Map() creates a new Google maps object.
    • The center property tells the API where to center the map. The map coordinates are set in the order: latitude, longitude.
    • The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom, and displays the entire earth. Set the zoom value higher to zoom in to the earth at higher resolutions.


      The code below puts a marker on the map. The position property sets the position of the marker.

    Step 3: Getting an API key
    Following are the steps required to get a API key:

    1. Go to the below mentioned link
      https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true.
    2. Create a new project or select from your existing projects.
    3. Click Continue to enable the API.
    4. On the Credentials page, get an API key (and set the API key restrictions).
    5. Replace the value of the key parameter in the URL with your own API key
    6. Output :

      Example: Adding GeeksforGeeks office city on Google maps

      INPUT :




      <!DOCTYPE html>
      <html>
        <head>
          <style>
            #map {
              height: 400px;
              width: 100%;
             }
          </style>
        </head>
        <body>
          <h3>GFG Google Maps Demo</h3>
          <div id="map"></div>
          <script>
            function initMap() {
              var uluru = {lat: 28.501859, lng: 77.410320};
              var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: uluru
              });
              var marker = new google.maps.Marker({
                position: uluru,
                map: map
              });
            }
          </script>
          <script async defer
          src=
      AIzaSyB2bXKNDezDf6YNVc-SauobynNHPo4RJb8&callback=initMap">
          </script>
        </body>
      </html>

      
      

      Output :



      Last Updated : 11 Jul, 2022
      Like Article
      Save Article
      Previous
      Next
      Share your thoughts in the comments
Similar Reads