Google Maps And Fancybox doesnt work correctly

[mustafa....@crmmedya.com]

Hello,Firstly I can Speak Little English.. 

I have a problem..

 When I click the "<a>", I want to open a map (use google maps javascript api) with Fancybox3..

When I click <a> , Popup is opening but it doesnt work correctly . Because Map is top left of Screen

HTML 

<a href="#mapTwo"  data-fancybox="mapLocation"  id="fancyBoxLink" ><img class="crmImg" crm-src="assets/images/lokasyon.png" alt="" /></a>   ( I click this div)

<div id="mapTwo" style="display:none; z-index:2;" class="mapTwo"> //After open this map with fancybox

 <div id="map" style="width: 600px; height: 500px;"></div>

</div>

JS

<script>

 function initMapTwo() {

     function d(b) {

         var d=new google.maps.Marker( {

             position: b.position, animation: google.maps.Animation.DROP, icon: c[b.type].icon, map: a

         }

         );

         d.addListener("click", e)

     }

     function e() {

         null!==marker.getAnimation()?marker.setAnimation(null): marker.setAnimation(google.maps.Animation.BOUNCE)

     }

     for(var h, a=new google.maps.Map(document.getElementById("mapTwo"), {

         center: {

             lat:37.8682724472, lng: 27.276224795 

         }

         , zoom:16 ,mapTypeId:"satellite",styles:[]

     }

     ), b="http://projeler.crmmedyaglobal.com/kusadasi-wings/assets/images/", c= {

         parking: {

             icon: b+"map-logo.png"

         }

     }

     , f=[ {

         position: new google.maps.LatLng(37.8682724472, 27.276224795 ), type: "parking"

     }

      

     ], g=0;

     h=f[g];

     g++)d(h)

 }

  

    </script> 

https://i.hizliresim.com/p0rnk0.png

Can you help me Please?