Adding a Google Map to Your Website

This instructional exercise demonstrates to you generally accepted methods to add a basic Google guide to a site page. It suits individuals with novice or moderate information of HTML and CSS, and a little learning of JavaScript. For a propelled manual for making maps, read the designer's guide.

The following is the map you'll make utilizing this instructional exercise.

Sample Google Map Screenshot :

Try it yourself!

The sample below shows all the code needed to create a map.

  
  
    
      
    
    
      

My Google Maps Demo



      
    
  

Getting started!

There are three stages to adding a Google map to your web page and all you need is to:
1) Create an HTML page to embed the google maps
2) Add a map
3) Get an API key

You require a web browser. Pick an outstanding one like Google Chrome (prescribed), Firefox, Safari or Internet Explorer, in light of your stage.

Step 1: Create an HTML page to embed the google maps

Note that this is a very basic page with a heading level three (h3), a single div element, and a style element which are all explained in the table below. You can add any content you like to the web page.


Step 2: Add a map

This area demonstrates to you generally accepted methods to stack the Google Maps JavaScript API into your site page, and how to compose your own particular JavaScript that uses the API to include a map.

  
  
    
      
    
    
      

My Google Maps Demo



      
    
  

Understanding the code: 

The content loads the API from the predefined URL.
The callback parameter executes the initMap work after the API is totally stacked.
The async attribute enables the program to keep rendering whatever remains of your page while the API loads.

The key parameter contains your API key. See Step 3: Get an API key for directions on getting your own API key later.


Step 3: Get an API key

This segment discloses how to verify your application to the Google Maps JavaScript API utilizing your own particular API key.

Follow these steps to get an API key:
1) Go to the Google API Console.
2) Create or select a project.
3) Click Continue to enable the API and any related services.
4) On the Credentials page, get a Browser key (and set the API Credentials).

Note: If you have an existing Browser key, you may use that key.
5) To prevent quota theft, secure your API key following these best practices.
6) (Optional) Enable billing. See Usage Limits for more information.
7) Copy the entire code of this tutorial from this page, to your text editor. If you don't already have a text editor, here are some recommendations: You can use: Notepad++ (for Windows); TextEdit (for macOS); gedit, KWrite, among others (for Linux machines).
8) Replace the value of the key parameter in the URL with your own API key (that's the API key that you've just obtained).

9) Save this file with a name that ends with .html, like google-maps.html.
10) Load the HTML file in a web browser by dragging it from your desktop onto your browser. Alternatively, double-clicking the file works on most operating systems.



Well done! we have just managed in creating google maps in our HTML.