How to Add Google Map on a Website

As far as I can remember, I wrote and made a YouTube video tutorial on this way back. Seems like, it's time to make a new video as many users are requesting for an updated version of this video. So, here you go.

Basic Procedure to Grab Google Map Code

  • Go to the web page for Google Map.
  • Type your desired Address on the search box (top left corner of the screen) and hit Enter.
  • Once your address has been pinned on the map, look at the bottom of your screen and click on the Settings Gear Icon. It should be right next to the "Help" icon.
  • A new window should pop up. Click on Share and embed map tab. Select the appropriate size of the map. From the "Size" drop-down menu, select "Custom Size", if you want to customize the map size and make necessary changes.
  • Copy the entire code from the input field.

At this stage we are done with out basic procedure. Since you have the code for Google Map, you need to decide where exactly you want to place the code.

Adding Map on HTML Page

If you want to add map on your simple HTML page, go through the following steps.

  • Go ahead and open your HTML page with your editor.
  • Simply paste the code that you copied previously.
  • Update the HTML page with your editor and open it on your web browser. You should see the map.

Adding Map on WordPress Site

Google Map can be added on your website's Sidebar, Pages or even on your blog post. For both the page and posts, you simply need to paste the code on the Editor section right after or before the text. Update your post or page as usual. However, for sidebar here is what you can do.

  • Log in to your WP Site.
  • Click on Appearance and then Widgets (assuming your theme supports sidebar widgets).
  • Find the text type widget and drag it to your sidebar.
  • Type the title for the widget and paste the code on the text input area. Hit Save.

Go back to the front-end of your site and refresh the page. You should have your map on sidebar. That's all for today folks. Now, I am taking questions.

Note: I highly recommend you to watch the video tutorial for better understanding.

Comments

Commenting is disabled.