CODEWITHSUNDEEP
jqueryjquery-uigoogle-mapsdomfancybox
Keyslinger
Keyslinger

Reputation: 5274

Manipulate Google map marker in parent window from within iframe on same page

I run the following JavaScript from inside a <script> element to initialize a Google map in a page I load in a jQuery UI tab via AJAX:

var tab_index = $('#tabs').tabs('option', 'selected');

var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(18.735693,-70.162651),
    mapTypeId: 'roadmap',
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
}

MapID = $('.site_map:visible').attr('id');

if (MapID !== 'map-new') {
    var map_id = 'map-'+tab_index;
    $('.site_map:visible').attr('id', map_id);
    var tab_map = new google.maps.Map(document.getElementById(map_id), myOptions);
    placeMarker($('.site_details:visible .inpLat').val(), $('.site_details:visible .inpLng').val(), tab_map);
}

After that, I load an iframe via Fancybox. I get two variables from the Fancybox iframe that I pass to hidden inputs in the parent window (containing the tab with the map) like so:

$('form:visible .inpLat', window.parent.document).val(myCoords.lat());
$('form:visible .inpLng', window.parent.document).val(myCoords.lng());

My question is, how can I pass those two variables to the map on the parent page and use them to update the location of a marker in the map?

Upvotes: 0

Views: 780

Answers (1)

Keyslinger
Keyslinger

Reputation: 5274

I figured it out; it turns out you can reference a function available to the parent page by putting parent. in front of it like so:

parent.placeMarker(myCoords.lat(), myCoords.lng());

Upvotes: 1

Related Questions