JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<link rel="stylesheet" href="http://www.rhythmdesignz.biz/code/fancy-box/source/jquery.fancybox.css">
<script src="http://www.rhythmdesignz.biz/code/fancy-box/source/jquery.fancybox.pack.js"></script>
<div id="wrapper">

	<div id="op_directv_googleMa"><a class="fancybox" href="http://www.rhythmdesignz.biz/images/directv_g_map.jpg"><img src="http://www.rhythmdesignz.biz/images/directv_g_map.jpg" name="gmap" id="gmap"></a>
	</div><!--end op_googleMap-->

</div>

JavaScript

$(document).ready(function(){
 		$(".fancybox").fancybox({
			width	:	'70%',
			height	:	'70%',
            afterShow: function InitMap(){
                $('.fancybox-image').replaceWith("<div id='map' style='width: 100%;height: 100%;'></div>");
                
                var mapOptions = {
						center: new google.maps.LatLng(31.784887,-106.356604),
						zoom: 15,
						mapTypeId: google.maps.MapTypeId.ROADMAP
					};
                myMap = new google.maps.Map(document.getElementById("map"), mapOptions);    
                
            }
		});
	});