<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Google Map Tutorials - DCP</title>
	<atom:link href="https://dcpweb.co.uk/blog-category/google-map-tutorials/feed" rel="self" type="application/rss+xml" />
	<link>https://dcpweb.co.uk/blog-category/google-map-tutorials</link>
	<description></description>
	<lastBuildDate>Wed, 17 Jul 2024 10:52:03 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://dcpweb.co.uk/wp-content/uploads/2023/12/favicon2-100x100.png</url>
	<title>Google Map Tutorials - DCP</title>
	<link>https://dcpweb.co.uk/blog-category/google-map-tutorials</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>How to embed Google Street View on website</title>
		<link>https://dcpweb.co.uk/blog/how-to-embed-google-street-view-on-website</link>
					<comments>https://dcpweb.co.uk/blog/how-to-embed-google-street-view-on-website#respond</comments>
		
		<dc:creator><![CDATA[info@dcpweb.co.uk]]></dc:creator>
		<pubDate>Tue, 18 May 2021 11:21:00 +0000</pubDate>
				<guid isPermaLink="false">https://dcpweb.co.uk/?post_type=blog&#038;p=12712</guid>

					<description><![CDATA[<p>If you are selling properties, simply want to display a street view of your business or any other specific location then using a Google street view can be a great way to add some interactive content to your website.</p>
<p>The post <a href="https://dcpweb.co.uk/blog/how-to-embed-google-street-view-on-website">How to embed Google Street View on website</a> appeared first on <a href="https://dcpweb.co.uk">DCP</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="12712" class="elementor elementor-12712" data-elementor-post-type="blog">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-02eed4d elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="02eed4d" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7793d4a" data-id="7793d4a" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-c266baf elementor-widget elementor-widget-text-editor" data-id="c266baf" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>In this video tutorial, I will show you how to embed Google Street View on a website.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-864358f elementor-widget elementor-widget-image" data-id="864358f" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img fetchpriority="high" decoding="async" width="800" height="450" src="https://dcpweb.co.uk/wp-content/uploads/2021/05/how-to-embed-google-street-view-on-website-v1-1024x576.jpg" class="attachment-large size-large wp-image-36186" alt="How to embed Google Street View on website" srcset="https://dcpweb.co.uk/wp-content/uploads/2021/05/how-to-embed-google-street-view-on-website-v1-1024x576.jpg 1024w, https://dcpweb.co.uk/wp-content/uploads/2021/05/how-to-embed-google-street-view-on-website-v1-300x169.jpg 300w, https://dcpweb.co.uk/wp-content/uploads/2021/05/how-to-embed-google-street-view-on-website-v1-768x432.jpg 768w, https://dcpweb.co.uk/wp-content/uploads/2021/05/how-to-embed-google-street-view-on-website-v1.jpg 1280w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
				<div class="elementor-element elementor-element-b44ba75 elementor-widget elementor-widget-text-editor" data-id="b44ba75" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<h2>Enhance user experience with a Google Street View</h2><p>If you are selling properties, and simply want to display a street view of your business or any other specific location then using a Google street view can be a great way to add some interactive content to your website.</p><p>You can add a Google Street View to any website which allows you to cut and paste in HTML code like WordPress.</p><p><a class="scroll-2" href="#video-tutorial-for-adding-google-street-view-to-website" data-cke-saved-href="#video-tutorial-for-adding-google-street-view-to-website">Click here to watch a free video tutorial for adding Google Street View to a website page</a>.</p><div class="sidebar-box"><h4>Google Street View tutorial overview:</h4><ul><li>Open <a href="https://www.google.co.uk/maps" target="_blank" rel="noopener" data-cke-saved-href="https://www.google.co.uk/maps">Google Maps</a> and search for a specific location.</li><li>Click on the 360 view image.</li><li>Select the 3 dots menu and select the &#8220;Embed a map&#8221; tab.</li><li>Copy the HTML code.</li><li>Login to your website and edit a page.</li><li>Add the street view HTML code to the page and save it.</li><li>Finally, test the page and make adjustments to the width and height of the street view.</li></ul></div><h3>Example Google Street View</h3><p>The below video is an example of what street view looks like on a website page.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-cf78666 elementor-widget elementor-widget-video" data-id="cf78666" data-element_type="widget" data-settings="{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;controls&quot;:&quot;yes&quot;}" data-widget_type="video.default">
				<div class="elementor-widget-container">
							<div class="e-hosted-video elementor-wrapper elementor-open-inline">
					<video class="elementor-video" src="https://dcpweb.co.uk/wp-content/uploads/2021/05/street-view-demo.mp4" autoplay="" controls="" controlsList="nodownload"></video>
				</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-91b435f elementor-widget elementor-widget-heading" data-id="91b435f" data-element_type="widget" id="video-tutorial-for-adding-google-street-view-to-website" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h2 class="elementor-heading-title elementor-size-default">Video tutorial for adding Google street view to website</h2>				</div>
				</div>
				<div class="elementor-element elementor-element-043ddf2 elementor-widget elementor-widget-video" data-id="043ddf2" data-element_type="widget" data-settings="{&quot;youtube_url&quot;:&quot;https:\/\/www.youtube.com\/embed\/JofswmDDxQM&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}" data-widget_type="video.default">
				<div class="elementor-widget-container">
							<div class="elementor-wrapper elementor-open-inline">
			<div class="elementor-video"></div>		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-de5d96a elementor-widget elementor-widget-text-editor" data-id="de5d96a" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p style="text-align: center;"><a href="https://youtu.be/JofswmDDxQM" target="_blank" rel="noopener" data-cke-saved-href="https://youtu.be/JofswmDDxQM">Google Street View Tutorial</a></p>								</div>
				</div>
				<div class="elementor-element elementor-element-8066335 elementor-widget elementor-widget-shortcode" data-id="8066335" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
							<div class="elementor-shortcode">		<div data-elementor-type="section" data-elementor-id="11050" class="elementor elementor-11050" data-elementor-post-type="elementor_library">
					<section class="elementor-section elementor-top-section elementor-element elementor-element-0e474d7 elementor-section-full_width elementor-section-height-default elementor-section-height-default" data-id="0e474d7" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
						<div class="elementor-container elementor-column-gap-no">
					<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-66bb553" data-id="66bb553" data-element_type="column" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-a083da0 elementor-widget elementor-widget-spacer" data-id="a083da0" data-element_type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-28fc43c" data-id="28fc43c" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-bd75b26 elementor-widget-mobile__width-inherit elementor-widget elementor-widget-heading" data-id="bd75b26" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<div class="elementor-heading-title elementor-size-default">See how my company can build an amazing website for your business</div>				</div>
				</div>
				<div class="elementor-element elementor-element-0fec627 elementor-widget-mobile__width-inherit elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="0fec627" data-element_type="widget" data-widget_type="icon-list.default">
				<div class="elementor-widget-container">
							<ul class="elementor-icon-list-items">
							<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Custom web design</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Secure and fast website solution</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Full management training</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Take control of your website</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">SEO optimisation</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Reliable web hosting and emails</span>
									</li>
						</ul>
						</div>
				</div>
				<div class="elementor-element elementor-element-c92db67 elementor-button-success elementor-widget elementor-widget-button" data-id="c92db67" data-element_type="widget" data-widget_type="button.default">
				<div class="elementor-widget-container">
									<div class="elementor-button-wrapper">
					<a class="elementor-button elementor-button-link elementor-size-sm" href="https://dcpweb.co.uk/contact">
						<span class="elementor-button-content-wrapper">
									<span class="elementor-button-text">BOOK A CALL</span>
					</span>
					</a>
				</div>
								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-9e44da6 elementor-widget elementor-widget-text-editor" data-id="9e44da6" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Google street view tutorial by Pankaj Shah: <strong>DCP <a href="https://dcpweb.co.uk/" data-cke-saved-href="https://dcpweb.co.uk/">Web Designers London</a></strong></p>								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://dcpweb.co.uk/blog/how-to-embed-google-street-view-on-website">How to embed Google Street View on website</a> appeared first on <a href="https://dcpweb.co.uk">DCP</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://dcpweb.co.uk/blog/how-to-embed-google-street-view-on-website/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to create a custom Google Map with Route Planner and Location Markers</title>
		<link>https://dcpweb.co.uk/blog/how-to-create-a-custom-google-map-with-route-planner-and-location-markers</link>
					<comments>https://dcpweb.co.uk/blog/how-to-create-a-custom-google-map-with-route-planner-and-location-markers#respond</comments>
		
		<dc:creator><![CDATA[info@dcpweb.co.uk]]></dc:creator>
		<pubDate>Sat, 01 May 2021 07:17:00 +0000</pubDate>
				<guid isPermaLink="false">https://dcpweb.co.uk/?post_type=blog&#038;p=12909</guid>

					<description><![CDATA[<p>In this video tutorial, I will show you how to create a custom Google Map with Route Planner and Location Markers. Custom Google Maps are great if you want to share a planned route with friends, clients or family.</p>
<p>The post <a href="https://dcpweb.co.uk/blog/how-to-create-a-custom-google-map-with-route-planner-and-location-markers">How to create a custom Google Map with Route Planner and Location Markers</a> appeared first on <a href="https://dcpweb.co.uk">DCP</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="12909" class="elementor elementor-12909" data-elementor-post-type="blog">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-42eee40 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="42eee40" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b329ac0" data-id="b329ac0" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-2605178 elementor-widget elementor-widget-text-editor" data-id="2605178" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>In this video tutorial, I will show you how to create a custom Google Map with Route Planner and Location Markers.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-d6d5a53 elementor-widget elementor-widget-image" data-id="d6d5a53" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img decoding="async" width="800" height="450" src="https://dcpweb.co.uk/wp-content/uploads/2021/05/google-map-with-route-planner-and-location-markers-v2-1024x576.jpg" class="attachment-large size-large wp-image-36433" alt="How to create a custom Google Map with Route Planner and Location Markers" srcset="https://dcpweb.co.uk/wp-content/uploads/2021/05/google-map-with-route-planner-and-location-markers-v2-1024x576.jpg 1024w, https://dcpweb.co.uk/wp-content/uploads/2021/05/google-map-with-route-planner-and-location-markers-v2-300x169.jpg 300w, https://dcpweb.co.uk/wp-content/uploads/2021/05/google-map-with-route-planner-and-location-markers-v2-768x432.jpg 768w, https://dcpweb.co.uk/wp-content/uploads/2021/05/google-map-with-route-planner-and-location-markers-v2.jpg 1280w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
				<div class="elementor-element elementor-element-8701050 elementor-widget elementor-widget-text-editor" data-id="8701050" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<h2>Custom Google Map with Route Planner and Location Markers video tutorial</h2><p>Custom Google Maps are great if you want to share a planned route with friends, clients or family. I often use a Google Maps Route Planner when I am on holiday to make sure I get to see all the places using the quickest quote possible. I have also used a custom <a href="https://dcpweb.co.uk/blog/how-to-embed-google-map" target="_blank" rel="noopener" data-cke-saved-href="https://dcpweb.co.uk/blog/how-to-embed-google-map">Google Map</a> to build a charity walking route for a client project. The map was embedded on the client&#8217;s website and also sent out as a link via email to participants.</p><p>If you are not sure how to get the map working on your website, then simply contact your <a href="https://dcpweb.co.uk/" data-cke-saved-href="https://dcpweb.co.uk/">web designer</a> for assistance or watch this tutorial: <a href="https://dcpweb.co.uk/blog/how-to-embed-google-map" data-cke-saved-href="https://dcpweb.co.uk/blog/how-to-embed-google-map">How to embed Google Maps on your website</a></p><p><a class="scroll-2" href="#video-tutorial-for-how-to-creating-a-custom-google-map-with-route-planner-and-location-markers" data-cke-saved-href="#video-tutorial-for-how-to-creating-a-custom-google-map-with-route-planner-and-location-markers">Watch my free video tutorial for how to create a custom Google Map with Route Planner and Location Markers</a>.</p><div class="sidebar-box"><h3>Video Tutorial Content</h3><ol><li>Create a Google account</li><li>Go to Google Maps: <a href="https://www.google.co.uk/maps" target="_blank" rel="noopener" data-cke-saved-href="https://www.google.co.uk/maps">https://www.google.co.uk/maps</a></li><li>Select &#8220;Your places&#8221; option from the menu</li><li>Select &#8220;Create Maps&#8221; from the Maps Tabs</li><li>Zoom in to your start location on Google Map</li><li>Add a title for the Map and an optional description</li><li>Select the type of route &#8211; In this tutorial, I will use &#8220;Add walking route&#8221;</li><li>Single click on the Map to mark the start location</li><li>Start to draw the route on Map / Tip: Hold down the left mouse button to move the map</li><li>Double left mouse click to mark the endpoint on your Google map</li><li>Add a new layer then add a custom marker for displaying a stop-off point or point of interest / Tip: Add a custom icon</li><li>Add a custom image for the new marker on the map</li><li>Add a title for the custom marker</li><li>Add a new layer to create a new path to a different location from the last endpoint</li><li>Find a point on the new path and click to adjust the path</li><li>Give the new path a title</li><li>Click preview to display the demo custom map</li><li>Click the share button</li><li>Select the correct sharing option for your map:<ul><li>On &#8211; Public on the web &#8211; Anyone can find and access a map</li><li>On &#8211; Anyone with a link &#8211; Anyone who has the link can access</li><li>Off &#8211; Share with specific people</li></ul></li><li>Option 1 &#8211; Copy the map URL and send it to someone via email or social media post</li><li>Option 2 &#8211; Click &#8220;<a href="https://dcpweb.co.uk/blog/how-to-embed-google-map" data-cke-saved-href="https://dcpweb.co.uk/blog/how-to-embed-google-map">Embed on my site</a>&#8220;</li></ol></div>								</div>
				</div>
				<div class="elementor-element elementor-element-e0ec72d elementor-widget elementor-widget-heading" data-id="e0ec72d" data-element_type="widget" id="video-tutorial-for-how-to-creating-a-custom-google-map-with-route-planner-and-location-markers" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h2 class="elementor-heading-title elementor-size-default">Video tutorial for how to creating a custom Google Map with Route Planner and Location Markers</h2>				</div>
				</div>
				<div class="elementor-element elementor-element-6a5ddb8 elementor-widget elementor-widget-video" data-id="6a5ddb8" data-element_type="widget" data-settings="{&quot;youtube_url&quot;:&quot;https:\/\/www.youtube.com\/embed\/hj9qnKz9NPc&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}" data-widget_type="video.default">
				<div class="elementor-widget-container">
							<div class="elementor-wrapper elementor-open-inline">
			<div class="elementor-video"></div>		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-10b24e4 elementor-widget elementor-widget-text-editor" data-id="10b24e4" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p style="text-align: center;"><a href="https://youtu.be/hj9qnKz9NPc" target="_blank" rel="noopener" data-cke-saved-href="https://youtu.be/hj9qnKz9NPc">How to create a custom Google Map with Route Planner and Location Markers</a></p>								</div>
				</div>
				<div class="elementor-element elementor-element-1447fb2 elementor-widget elementor-widget-heading" data-id="1447fb2" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<h2 class="elementor-heading-title elementor-size-default">Example Google Maps with route planner and location markers</h2>				</div>
				</div>
				<div class="elementor-element elementor-element-080f1e5 elementor-widget elementor-widget-html" data-id="080f1e5" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
					<p style="text-align: center;"><iframe height="480" src="https://www.google.com/maps/d/embed?mid=1wkGwMAtKonq2WUZPrmdr9mndI_0uQoIQ" width="1110"></iframe></p>				</div>
				</div>
				<div class="elementor-element elementor-element-09208a1 elementor-widget elementor-widget-shortcode" data-id="09208a1" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
							<div class="elementor-shortcode">		<div data-elementor-type="section" data-elementor-id="11050" class="elementor elementor-11050" data-elementor-post-type="elementor_library">
					<section class="elementor-section elementor-top-section elementor-element elementor-element-0e474d7 elementor-section-full_width elementor-section-height-default elementor-section-height-default" data-id="0e474d7" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
						<div class="elementor-container elementor-column-gap-no">
					<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-66bb553" data-id="66bb553" data-element_type="column" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-a083da0 elementor-widget elementor-widget-spacer" data-id="a083da0" data-element_type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-28fc43c" data-id="28fc43c" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-bd75b26 elementor-widget-mobile__width-inherit elementor-widget elementor-widget-heading" data-id="bd75b26" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<div class="elementor-heading-title elementor-size-default">See how my company can build an amazing website for your business</div>				</div>
				</div>
				<div class="elementor-element elementor-element-0fec627 elementor-widget-mobile__width-inherit elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="0fec627" data-element_type="widget" data-widget_type="icon-list.default">
				<div class="elementor-widget-container">
							<ul class="elementor-icon-list-items">
							<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Custom web design</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Secure and fast website solution</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Full management training</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Take control of your website</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">SEO optimisation</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Reliable web hosting and emails</span>
									</li>
						</ul>
						</div>
				</div>
				<div class="elementor-element elementor-element-c92db67 elementor-button-success elementor-widget elementor-widget-button" data-id="c92db67" data-element_type="widget" data-widget_type="button.default">
				<div class="elementor-widget-container">
									<div class="elementor-button-wrapper">
					<a class="elementor-button elementor-button-link elementor-size-sm" href="https://dcpweb.co.uk/contact">
						<span class="elementor-button-content-wrapper">
									<span class="elementor-button-text">BOOK A CALL</span>
					</span>
					</a>
				</div>
								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-3ee2eb0 elementor-widget elementor-widget-text-editor" data-id="3ee2eb0" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p style="text-align: center;">Did you know you can find over 500 more video tutorials on our <a href="https://www.youtube.com/dcpwebdesigners" target="_blank" rel="noopener" data-cke-saved-href="https://www.youtube.com/dcpwebdesigners">Elearning YouTube Channel</a>?</p><p style="text-align: center;">Google maps video tutorial by: <strong>DCP <a href="https://dcpweb.co.uk/" data-cke-saved-href="https://dcpweb.co.uk/">Web Designers London</a></strong></p>								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://dcpweb.co.uk/blog/how-to-create-a-custom-google-map-with-route-planner-and-location-markers">How to create a custom Google Map with Route Planner and Location Markers</a> appeared first on <a href="https://dcpweb.co.uk">DCP</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://dcpweb.co.uk/blog/how-to-create-a-custom-google-map-with-route-planner-and-location-markers/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>How to embed google map into a website page tutorial</title>
		<link>https://dcpweb.co.uk/blog/how-to-embed-google-map</link>
					<comments>https://dcpweb.co.uk/blog/how-to-embed-google-map#respond</comments>
		
		<dc:creator><![CDATA[info@dcpweb.co.uk]]></dc:creator>
		<pubDate>Sat, 13 Jun 2020 07:25:00 +0000</pubDate>
				<guid isPermaLink="false">https://dcpweb.co.uk/?post_type=blog&#038;p=13261</guid>

					<description><![CDATA[<p>In this tutorial, I'm going to show you how to embed a Google map onto your website page. We will use the source code editor to embed the Google Map code which will display on a contact page.</p>
<p>The post <a href="https://dcpweb.co.uk/blog/how-to-embed-google-map">How to embed google map into a website page tutorial</a> appeared first on <a href="https://dcpweb.co.uk">DCP</a>.</p>
]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="13261" class="elementor elementor-13261" data-elementor-post-type="blog">
						<section class="elementor-section elementor-top-section elementor-element elementor-element-17ffe59 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="17ffe59" data-element_type="section">
						<div class="elementor-container elementor-column-gap-default">
					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-97faf11" data-id="97faf11" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-c2981cf elementor-widget elementor-widget-video" data-id="c2981cf" data-element_type="widget" data-settings="{&quot;youtube_url&quot;:&quot;https:\/\/www.youtube.com\/embed\/Pi1_BFQcClQ&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}" data-widget_type="video.default">
				<div class="elementor-widget-container">
							<div class="elementor-wrapper elementor-open-inline">
			<div class="elementor-video"></div>		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-027b55c elementor-widget elementor-widget-text-editor" data-id="027b55c" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Hi and welcome to this DCP web tutorial.</p><p>In this tutorial, I&#8217;m going to show you how to embed a Google map onto your website page.</p><p><strong>Video Tutorial Summary:</strong></p><ul><li>Open Google Maps</li><li>Find a location</li><li>Copy the Google Map embed code</li><li>Open your website admin control panel</li><li>Edit page source code</li><li>Paste Google Map embed code</li><li>Save the page in the admin control panel</li><li>Reload the page on your website to see the embedded Google Map</li></ul><p>So, let&#8217;s go ahead and open up the web browser (Google Chrome) and we&#8217;ll go to Google Maps. Just type in Google Maps into your search engine and click on <a href="https://www.google.com/maps" target="_blank" rel="noopener" data-cke-saved-href="https://www.google.com/maps">Google Maps website page</a>.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-bc8bb72 elementor-widget elementor-widget-image" data-id="bc8bb72" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img decoding="async" width="800" height="259" src="https://dcpweb.co.uk/wp-content/uploads/2020/06/search-for-google-maps-03-min-1024x332.jpg" class="attachment-large size-large wp-image-13265" alt="Search for Google Maps" srcset="https://dcpweb.co.uk/wp-content/uploads/2020/06/search-for-google-maps-03-min-1024x332.jpg 1024w, https://dcpweb.co.uk/wp-content/uploads/2020/06/search-for-google-maps-03-min-300x97.jpg 300w, https://dcpweb.co.uk/wp-content/uploads/2020/06/search-for-google-maps-03-min-768x249.jpg 768w, https://dcpweb.co.uk/wp-content/uploads/2020/06/search-for-google-maps-03-min.jpg 1110w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
				<div class="elementor-element elementor-element-0ee1932 elementor-widget elementor-widget-text-editor" data-id="0ee1932" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>We want to search for some things, I&#8217;m going to search for my company which is <a href="https://dcpweb.co.uk/" data-cke-saved-href="https://dcpweb.co.uk/">DCP Web Designers</a>.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-104c52f elementor-widget elementor-widget-image" data-id="104c52f" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img loading="lazy" decoding="async" width="800" height="259" src="https://dcpweb.co.uk/wp-content/uploads/2020/06/search-google-maps-01-min-1024x332.jpg" class="attachment-large size-large wp-image-13266" alt="Search Google Maps for your business" srcset="https://dcpweb.co.uk/wp-content/uploads/2020/06/search-google-maps-01-min-1024x332.jpg 1024w, https://dcpweb.co.uk/wp-content/uploads/2020/06/search-google-maps-01-min-300x97.jpg 300w, https://dcpweb.co.uk/wp-content/uploads/2020/06/search-google-maps-01-min-768x249.jpg 768w, https://dcpweb.co.uk/wp-content/uploads/2020/06/search-google-maps-01-min.jpg 1110w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
				<div class="elementor-element elementor-element-3684c25 elementor-widget elementor-widget-text-editor" data-id="3684c25" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Click the share button and then click on the embed tab. Now copy the embed code by pressing “Copy HTML” link.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-1666b96 elementor-widget elementor-widget-image" data-id="1666b96" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img loading="lazy" decoding="async" width="800" height="259" src="https://dcpweb.co.uk/wp-content/uploads/2020/06/copy-google-maps-embed-code-01-min-1024x332.jpg" class="attachment-large size-large wp-image-13267" alt="Copy Google Maps embed code" srcset="https://dcpweb.co.uk/wp-content/uploads/2020/06/copy-google-maps-embed-code-01-min-1024x332.jpg 1024w, https://dcpweb.co.uk/wp-content/uploads/2020/06/copy-google-maps-embed-code-01-min-300x97.jpg 300w, https://dcpweb.co.uk/wp-content/uploads/2020/06/copy-google-maps-embed-code-01-min-768x249.jpg 768w, https://dcpweb.co.uk/wp-content/uploads/2020/06/copy-google-maps-embed-code-01-min.jpg 1110w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
				<div class="elementor-element elementor-element-77f27b9 elementor-widget elementor-widget-text-editor" data-id="77f27b9" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p><strong>Example Embed Code:</strong></p>								</div>
				</div>
				<div class="elementor-element elementor-element-6f814b4 elementor-widget elementor-widget-code-highlight" data-id="6f814b4" data-element_type="widget" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-default copy-to-clipboard word-wrap">
			<pre data-line="" class="highlight-height language-javascript ">
				<code readonly="true" class="language-javascript">
					<xmp><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d19850.15529292229!2d0.022530429437020036!3d51.54495867984927!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a667c9d281e3%3A0x6d7e482127ce6ab0!2sDCP%20Web%20Designers!5e0!3m2!1sen!2suk!4v1592043309058!5m2!1sen!2suk" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-78ea6e3 elementor-widget elementor-widget-text-editor" data-id="78ea6e3" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Now open up your website, in this tutorial I will go to my website: <a href="https://dcpweb.co.uk/" target="_blank" rel="noopener">www.dcpweb.co.uk</a></p><p>On the contact page, I want to place a map between the form and the content above.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-c78b447 elementor-widget elementor-widget-image" data-id="c78b447" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img loading="lazy" decoding="async" width="800" height="259" src="https://dcpweb.co.uk/wp-content/uploads/2020/06/dcp-contact-page-01-min-1024x332.jpg" class="attachment-large size-large wp-image-13268" alt="DCP contact page for Google Map embed code" srcset="https://dcpweb.co.uk/wp-content/uploads/2020/06/dcp-contact-page-01-min-1024x332.jpg 1024w, https://dcpweb.co.uk/wp-content/uploads/2020/06/dcp-contact-page-01-min-300x97.jpg 300w, https://dcpweb.co.uk/wp-content/uploads/2020/06/dcp-contact-page-01-min-768x249.jpg 768w, https://dcpweb.co.uk/wp-content/uploads/2020/06/dcp-contact-page-01-min.jpg 1110w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
				<div class="elementor-element elementor-element-c22f635 elementor-widget elementor-widget-text-editor" data-id="c22f635" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Login into your website admin control panel. Whether you&#8217;re using WordPress using the custom website content management system I&#8217;m using doesn&#8217;t really matter, the goal is to embed the map.</p><p>In the admin control panel, I will edit my contact page.</p><p>A good idea is to add a text placeholder for where you want to display your map. When you check the source code, finding the location in the code will be easier.</p><p>In this tutorial, I will use the placeholder text “add map”.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-360083c elementor-widget elementor-widget-image" data-id="360083c" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img loading="lazy" decoding="async" width="800" height="259" src="https://dcpweb.co.uk/wp-content/uploads/2020/06/add-map-place-holder-text-01-min-1024x332.jpg" class="attachment-large size-large wp-image-13269" alt="Add map place holder text" srcset="https://dcpweb.co.uk/wp-content/uploads/2020/06/add-map-place-holder-text-01-min-1024x332.jpg 1024w, https://dcpweb.co.uk/wp-content/uploads/2020/06/add-map-place-holder-text-01-min-300x97.jpg 300w, https://dcpweb.co.uk/wp-content/uploads/2020/06/add-map-place-holder-text-01-min-768x249.jpg 768w, https://dcpweb.co.uk/wp-content/uploads/2020/06/add-map-place-holder-text-01-min.jpg 1110w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
				<div class="elementor-element elementor-element-c6402af elementor-widget elementor-widget-text-editor" data-id="c6402af" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Now when I go to the source code, you can see it is easy to find the place holder.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-a6f1fb4 elementor-widget elementor-widget-image" data-id="a6f1fb4" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img loading="lazy" decoding="async" width="800" height="259" src="https://dcpweb.co.uk/wp-content/uploads/2020/06/place-holder-text-source-code-01-min-1024x332.jpg" class="attachment-large size-large wp-image-13270" alt="Place holder text source code" srcset="https://dcpweb.co.uk/wp-content/uploads/2020/06/place-holder-text-source-code-01-min-1024x332.jpg 1024w, https://dcpweb.co.uk/wp-content/uploads/2020/06/place-holder-text-source-code-01-min-300x97.jpg 300w, https://dcpweb.co.uk/wp-content/uploads/2020/06/place-holder-text-source-code-01-min-768x249.jpg 768w, https://dcpweb.co.uk/wp-content/uploads/2020/06/place-holder-text-source-code-01-min.jpg 1110w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
				<div class="elementor-element elementor-element-78c8f35 elementor-widget elementor-widget-text-editor" data-id="78c8f35" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>WordPress and other website content management system will also have an option to view source code.</p><p>In the source code select the place holder text, then paste the <a href="https://dcpweb.co.uk/blog/how-to-create-a-custom-google-map-with-route-planner-and-location-markers" target="_blank" rel="noopener" data-cke-saved-href="https://dcpweb.co.uk/blog/how-to-create-a-custom-google-map-with-route-planner-and-location-markers">Google Map</a> embed code (Windows CTRL+V) or (Apple Mac CMD+V). You can also right-click and select paste.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-4d48853 elementor-widget elementor-widget-image" data-id="4d48853" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img loading="lazy" decoding="async" width="800" height="259" src="https://dcpweb.co.uk/wp-content/uploads/2020/06/paste-google-map-embed-code-01-min-1024x332.jpg" class="attachment-large size-large wp-image-13271" alt="Paste Google Map embed code" srcset="https://dcpweb.co.uk/wp-content/uploads/2020/06/paste-google-map-embed-code-01-min-1024x332.jpg 1024w, https://dcpweb.co.uk/wp-content/uploads/2020/06/paste-google-map-embed-code-01-min-300x97.jpg 300w, https://dcpweb.co.uk/wp-content/uploads/2020/06/paste-google-map-embed-code-01-min-768x249.jpg 768w, https://dcpweb.co.uk/wp-content/uploads/2020/06/paste-google-map-embed-code-01-min.jpg 1110w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
				<div class="elementor-element elementor-element-60dd89f elementor-widget elementor-widget-text-editor" data-id="60dd89f" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>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”.</p><p>Now if we go back to the contact page and refresh, we&#8217;ll see the Google Map.</p><p>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.</p><p>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</p><p>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</p><p>I have highlighted the attributes which require editing below.</p><ul><li><strong>width=&#8221;1110&#8243;</strong></li><li><strong>height=&#8221;400&#8243;</strong></li></ul>								</div>
				</div>
				<div class="elementor-element elementor-element-93d0898 elementor-widget elementor-widget-code-highlight" data-id="93d0898" data-element_type="widget" data-widget_type="code-highlight.default">
				<div class="elementor-widget-container">
							<div class="prismjs-default copy-to-clipboard word-wrap">
			<pre data-line="" class="highlight-height language-javascript ">
				<code readonly="true" class="language-javascript">
					<xmp><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d19850.15529292229!2d0.022530429437020036!3d51.54495867984927!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a667c9d281e3%3A0x6d7e482127ce6ab0!2sDCP%20Web%20Designers!5e0!3m2!1sen!2suk!4v1592043309058!5m2!1sen!2suk" width="1110" height="400" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></xmp>
				</code>
			</pre>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-08c2c28 elementor-widget elementor-widget-text-editor" data-id="08c2c28" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>The Map now fits nicely with the form below and the content above.</p>								</div>
				</div>
				<div class="elementor-element elementor-element-dee9eb3 elementor-widget elementor-widget-image" data-id="dee9eb3" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
															<img loading="lazy" decoding="async" width="800" height="450" src="https://dcpweb.co.uk/wp-content/uploads/2020/06/dcp-contact-page-with-google-map-01-min-1024x576.jpg" class="attachment-large size-large wp-image-13272" alt="DCP contact page with Google Map embedded" srcset="https://dcpweb.co.uk/wp-content/uploads/2020/06/dcp-contact-page-with-google-map-01-min-1024x576.jpg 1024w, https://dcpweb.co.uk/wp-content/uploads/2020/06/dcp-contact-page-with-google-map-01-min-300x169.jpg 300w, https://dcpweb.co.uk/wp-content/uploads/2020/06/dcp-contact-page-with-google-map-01-min-768x432.jpg 768w, https://dcpweb.co.uk/wp-content/uploads/2020/06/dcp-contact-page-with-google-map-01-min.jpg 1110w" sizes="(max-width: 800px) 100vw, 800px" />															</div>
				</div>
				<div class="elementor-element elementor-element-9f28050 elementor-widget elementor-widget-text-editor" data-id="9f28050" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>So that&#8217;s simply how you go about adding a Google map to your website page, it doesn&#8217;t matter if you are using Joomla or WordPress or any sort of content management system if it&#8217;s a good one you should be able to go into the admin area and edit the source code for a page.</p><p>Did you know you can find over 500 more video tutorials on our <a href="https://www.youtube.com/dcpwebdesigners" target="_blank" rel="noopener" data-cke-saved-href="https://www.youtube.com/dcpwebdesigners">Elearning YouTube Channel</a>?</p>								</div>
				</div>
				<div class="elementor-element elementor-element-85f44c3 elementor-widget elementor-widget-shortcode" data-id="85f44c3" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
							<div class="elementor-shortcode">		<div data-elementor-type="section" data-elementor-id="11050" class="elementor elementor-11050" data-elementor-post-type="elementor_library">
					<section class="elementor-section elementor-top-section elementor-element elementor-element-0e474d7 elementor-section-full_width elementor-section-height-default elementor-section-height-default" data-id="0e474d7" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
						<div class="elementor-container elementor-column-gap-no">
					<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-66bb553" data-id="66bb553" data-element_type="column" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-a083da0 elementor-widget elementor-widget-spacer" data-id="a083da0" data-element_type="widget" data-widget_type="spacer.default">
				<div class="elementor-widget-container">
							<div class="elementor-spacer">
			<div class="elementor-spacer-inner"></div>
		</div>
						</div>
				</div>
					</div>
		</div>
				<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-28fc43c" data-id="28fc43c" data-element_type="column">
			<div class="elementor-widget-wrap elementor-element-populated">
						<div class="elementor-element elementor-element-bd75b26 elementor-widget-mobile__width-inherit elementor-widget elementor-widget-heading" data-id="bd75b26" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
					<div class="elementor-heading-title elementor-size-default">See how my company can build an amazing website for your business</div>				</div>
				</div>
				<div class="elementor-element elementor-element-0fec627 elementor-widget-mobile__width-inherit elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="0fec627" data-element_type="widget" data-widget_type="icon-list.default">
				<div class="elementor-widget-container">
							<ul class="elementor-icon-list-items">
							<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Custom web design</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Secure and fast website solution</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Full management training</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Take control of your website</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">SEO optimisation</span>
									</li>
								<li class="elementor-icon-list-item">
											<span class="elementor-icon-list-icon">
							<svg aria-hidden="true" class="e-font-icon-svg e-fas-check" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>						</span>
										<span class="elementor-icon-list-text">Reliable web hosting and emails</span>
									</li>
						</ul>
						</div>
				</div>
				<div class="elementor-element elementor-element-c92db67 elementor-button-success elementor-widget elementor-widget-button" data-id="c92db67" data-element_type="widget" data-widget_type="button.default">
				<div class="elementor-widget-container">
									<div class="elementor-button-wrapper">
					<a class="elementor-button elementor-button-link elementor-size-sm" href="https://dcpweb.co.uk/contact">
						<span class="elementor-button-content-wrapper">
									<span class="elementor-button-text">BOOK A CALL</span>
					</span>
					</a>
				</div>
								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		</div>
						</div>
				</div>
				<div class="elementor-element elementor-element-ae44da3 elementor-widget elementor-widget-text-editor" data-id="ae44da3" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
									<p>Article By Pankaj Shah | June 13th, 2020 | <a href="https://dcpweb.co.uk/" data-cke-saved-href="https://dcpweb.co.uk/">London Web designers</a></p>								</div>
				</div>
					</div>
		</div>
					</div>
		</section>
				</div>
		<p>The post <a href="https://dcpweb.co.uk/blog/how-to-embed-google-map">How to embed google map into a website page tutorial</a> appeared first on <a href="https://dcpweb.co.uk">DCP</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://dcpweb.co.uk/blog/how-to-embed-google-map/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
