How to embed google map into a website page tutorial

1. How to embed google map into a website tutorial Tip: Visit my blog post to watch free video tutorial https://www.dcpweb.co.uk/blog/how-to-embed-google-map 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. www.dcpweb.co.uk

2. 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. We want to search for some things, I'm going to search for my company which is DCP Web Designers. https://www.dcpweb.co.uk/blog/how-to-embed-google-map

3. Click the share button and then click on the embed tab. Now copy the embed code by pressing “Copy HTML” link. Example Embed Code: <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d19850.15529292229!2d0.022530 429437020036!3d51.54495867984927!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47 d8a667c9d281e3%3A0x6d7e482127ce6ab0!2sDCP%20Web%20Designers!5e0!3m2!1sen!2suk!4v1592043 309058!5m2!1sen!2suk" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> 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. https://www.dcpweb.co.uk/blog/how-to-embed-google-map

4. See how my company can build an amazing website for your business. •Custom web design. •Secure and fast website solution. •Full management training. •Take control of your website. •SEO optimisation. •Reliable web hosting and emails. 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”. https://www.dcpweb.co.uk/blog/how-to-embed-google-map

5. Now when I go to the source code, you can see it is easy to find the place holder. 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. 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. https://www.dcpweb.co.uk/blog/how-to-embed-google-map

6. 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. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d19850.15529292229!2d0.022530 429437020036!3d51.54495867984927!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47 d8a667c9d281e3%3A0x6d7e482127ce6ab0!2sDCP%20Web%20Designers!5e0!3m2!1sen!2suk!4v1592043 309058!5m2!1sen!2suk" width="1110" height="400" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> 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 600 more video tutorials on our Elearning YouTube Channel? https://www.dcpweb.co.uk/blog/how-to-embed-google-map

7. About DCP Web Designers At DCP we have over 15 years of web development knowledge and experience. Our goal is to create high quality, easy to use, affordable website solutions for businesses. Your excitement, happiness and satisfaction are at the very core of everything we do at DCP but more than anything we understand that results matter the most! There is nothing better than getting a phone call or email from our clients telling us how much they love their website :) We simply love what we do at DCP and take an ethical approach, guiding our clients with our vast knowledge gained from working on hundreds of website projects for a diverse range of client. You can feel confident that you are getting the best web solutions for your business when you choose to work with DCP London Web Designers. Get a custom-designed WordPress website to help your business grow. Take control over your business website and make updates whenever required. Get free onsite search engine optimisation to achieve a better ranking in search engines. •Take control of your website. •Mobile-friendly design. •Long term technical support. •Long term website growth plan. •SEO marketing strategies. •Social media marketing strategies. •Secure & reliable hosting. •Reliable business emails. Contact Us Email: info@dcpweb.co.uk Tel: 0208 539 4415 mob: 07838 678 770 Web: www.dcpweb.co.uk https://www.dcpweb.co.uk/blog/how-to-embed-google-map