How To Add Google Maps With A Marker to a Website

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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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 :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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 :

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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>

      chevron_right

      
      

      Output :

      This article is contributed by Shubrodeep Banerjee. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

      Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.



      My Personal Notes arrow_drop_up