This is a Google Map and Contact Block that can be added to your homepage. It is fully responsive and is a great filler.

Find Us

• Address: 198 Example street, Suite 7s new York, NY 10013

• Phone: 112 345 6798

• Email: example@email.com

CSS

/*--- Find Us ---*/

.find-us {
	background: #fff;
	padding: 20px;
}

.find-us .map-wrapper {
	display: inline-block;
	width: 45%;
	border: 1px solid #e5e5e5;
	padding: 10px;
	background: #fff;	
}

.find-us .info-wrapper {
	display: inline-block;
	width: 45%;
	padding: 10px;
	vertical-align: top;
}

.find-us h2 {
	font-size: 33px;	
}

.find-us .fu-list {
	margin: 30px 0 0;	
}

.find-us .fu-list li {
	clear: both;
	margin: 15px 0 0;	
	padding-bottom: 0;
	list-style-type: none;
	list-style-position: outside;
}

.find-us .fu-icon-wrapper {
	width: 20px;
	height: auto;
	line-height: 24px;
	margin: 1px 10px 0 0;	
	z-index: 9;
	text-align: center; /* evens all the icons up */
	float: left;
}

.find-us .fu-icon-wrapper i[class*="fa"] {
	font-size: 18px;
	display: block !important; /* template_pro.css line 653 disables/sets this to none */
	color: #000;
}

.find-us .fu-content {
	overflow: hidden; /* this prevents the text flowing under the icon */
}

.find-us .fu-content p {
	padding: 0;
	margin: 0;
}

@media screen and (max-width: 768px) {
	.find-us .map-wrapper {
		width: 100%;		
	}

	.find-us .info-wrapper {
		width: 100%;
	}
}

HTML

<div class="find-us">	

	<div class="map-wrapper">{load--module mod_bt_googlemaps,Us On The Map - Find Us}</div>
	
	<div class="info-wrapper">
	
		<h2>Find Us</h2>
		
		<ul class="fu-list">			
			<li>		
				<div class="fu-icon-wrapper"><i class="fa fa-map-marker"></i></div>			
				<div class="fu-content"><p>Address: 198 Example street, Suite 7s new York, NY 10013</p></div>			
			</li>				
			<li>		
				<div class="fu-icon-wrapper"><i class="fa fa-mobile"></i></div>			
				<div class="fu-content"><p>Phone: 112 345 6798</p></div>			
			</li>				
			<li>		
				<div class="fu-icon-wrapper"><i class="fa fa-envelope"></i></div>			
				<div class="fu-content"><p>Email:&nbsp;<a href="mailto:example@email.com">example@email.com</a></p></div>			
			</li>				
		</ul>
	</div>

</div>

<div style="clear: both;">&nbsp;</div>

Notes

• This is based on a module from JSN Dona Template
• remove the -- from load--module to correct the code

Google Map

• You need to install and use a google map plugin. I have used the BT Google Maps plugin.
• Yes I have used an image in the demo because I did not want to install a plugin for 1 wiki article.

Adding the Google Map via a plugin

Option 1

• remember that the module must be published on the page you want to load it on.
• you should not assign a module position
• so you are best to copy the Us on the Map Module to use for the hompage only call it (copy it when you have finished the module)
• dont forget to enable parse content
• loadmodule does not like () in the module name
• you can use the new joomla module button, but it will only load in articles

Option 2

• you can remove the .map-wrapper and just load the map in an appropriate mopdule posistion instead

Option 3

• Manually add google map code within .map-wrapper, this might get removed when saving via a WYSIWYG