Access google Map API out side of I-frame - I want to load M

Question

Hi Team,

 

I need to load Dynamic google map for window Store - using Angular Js and Java Script. I try  to load in i-frame Its Loaded but Need to Access google Map API to Changes Marker/Info Out Side of then i-frame.

 

1. Added in HTML Page <x-ms-webview id="getLocationFrame" load-map style="width:100%; height:100%;"></x-ms-webview> 

2.Load/set Src on Angular js Directive Name= "load-map" means on load -

 

if (document.getElementById('getLocationFrame')) {

document.getElementById('getLocationFrame').src = "ms-appx-web:///www/views/map.html"; 

}

 

 

and I have code in  

<div id="map" ></div>

<script>

function initMap() {

var myLatLng = { lat: -25.363, lng: 131.044 };

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 4,

center: myLatLng

});

var marker = new google.maps.Marker({

position: myLatLng,

map: map,

title: 'Hello World!'

});

google.maps.event.addListener(marker, 'click', function () {

window.parent.postMessage("Paris!", "*");

});

}

</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=My_Key&sensor=false&callback=initMap"></script>