Pankaj Shah

I hope you enjoy reading our blog posts. If you want DCP to build you an awesome website, click here.

How to embed google map into a website page tutorial

13-06-2020

Back

Hi and welcome to this DCP web tutorial.

In this tutorial, I'm going to show you how to embed a Google map onto your website page.

Video Tutorial Summary:

  • Open Google Maps
  • Find a location
  • Copy the Google Map embed code
  • Open your website admin control panel
  • Edit page source code
  • Paste Google Map embed code
  • Save page in the admin control panel
  • Reload page on your website to see embedded Google Map

So, let's go ahead and open up the web browser (Google Chrome) and we'll go to Google Maps. Just type in Google Maps into your search engine and click on Google Maps website page.

Search for Google Maps

We want to search for some things, I'm going to search for my company which is DCP Web Designers.

Search Google Maps for your business

Click the share button and then click on the embed tab. Now copy the embed code by pressing “Copy HTML” link.

Copy Google Maps embed code

Example Embed Code:

Now open up your website, in this tutorial I will go to my website: www.dcpweb.co.uk

On the contact page, I want to place a map between the form and the content above.

DCP contact page for Google Map embed code

Login into your website admin control panel. Whether you're using WordPress or using the custom website content management system like I'm using doesn't really matter, the goal is to embed the map.

In the admin control panel, I will edit my contact page.

A good idea is to add a text place holder for where you want to display your map. When you check the source code it will be easier to find the location in code.

In this tutorial, I will use the place holder text “add map”.

Add map place holder text

Now when I go to the source code, you can see it is easy to find the place holder.

Place holder text source code

WordPress and other website content management system will also have an option to view source code.

In the source code select the place holder text, then paste the Google Map embed code (Windows CTRL+V) or (Apple Mac CMD+V). You can also right-click and select paste.

Paste Google Map embed code

The next step is to save your content, in this example, I will select the save button, for WordPress you can either select “preview” or “publish”.

Now if we go back to the contact page and refresh, we'll see the Google Map.

The map is not the right size, it would look better if the map filled the full width of the page. To make the map wider we need to edit the “width” attribute of the Google Map embed code.

Go back to your admin control panel and edit the page which contains the map. View the source code and change the width attribute, in this example I will change the width to value = 1110

I will also adjust the height of the map by editing the Google Map embed code height attribute, I will set the value to = 400

I have highlighted the attributes which require editing below.

  • width="1110"
  • height="400"

The Map now fits nicely with the form below and the content above.

DCP contact page with Google Map embedded

So that's simply how you go about adding a Google map to your website page, it doesn't matter if you are using Joomla or WordPress or any sort of content management system if it's a good one you should be able to go into the admin area and edit the source code for a page.

Did you know you can find over 500 more video tutorials on our Elearning YouTube Channel?


Article By Pankaj Shah | June 13th, 2020 | London Web designers


Tell Us Your Thoughts

Thank you for contacting us.
We will reply to you in next 2 working days.


Releated Posts


Important features to add to your website

02-09-2021

Important features to add to your website

Web development and design are arguably one of the most popular jobs coming to the online market thanks to the continuous rise of the internet along with more people seeking employment from home or online. When creating a website, you’d also want to keep in mind that the view of others always comes first, and you always want to ensure the viewers receive the best information or message possible.

How to embed Youtube videos using CKEditor tutorial

05-08-2017

How to embed Youtube videos using CKEditor tutorial

In this video tutorial, I will show you how to embed YouTube videos using CK Editor. The same concept can be applied to other CMS systems such as WordPress or Joomla. As you are probably aware YouTube is a powerful social media platform which can be used to promote your business and showcase your skills and knowledge.

7 Web Design & UX Trends for 2017

03-01-2017

7 Web Design & UX Trends for 2017

Are you keeping up with the latest business website design trends for 2017? Is your business website looking a bit old-school and needs a Morden twist? Dubai Monsters has created this infographic to show you all the best trends for business website development.

How to add product variations in WooCommerce - Video Tutorial

21-04-2021

How to add product variations in woocommerce - Step by Step Guide

In this video tutorial, I will show you how to add products variations to your WooCommerce Shop. Product variation is WooComemrce allow you to add custom attributes to a product. The attribute terms are stored in a collection, this allows the collection of attributes to be used on many products in your shop.

GET YOUR FREE QUOTE


CLAIM YOUR 2 HOURS

FREE CONSULTANCY


  • AFFORDABLE PRICING
  • 15 YEAR KNOWLEDGE
  • LONDON BASED DESIGN AGENCY

NO OBLIGATION QUOTE

arrow
Please enter your name
Please enter correct email
Please enter your phone number
Please enter your message

Your data is encrypted and never shared.
View our privacy policy.

Thank you for contacting us.
We will reply to you in next 2 working days.

back