Действие триггера мыши мыши

Question

У меня есть критический вопрос: это выглядит немного сложнее, как показано ниже.

У меня есть платформа Wordpress и внутри страницы i встроена карта google iFrame. И у карты есть некоторые моменты, когда пользователь нажимает, у нее будет всплывающее окно с пузырьками на карте, показывающее некоторые детали.

Теперь мне нужно внести некоторые изменения, чтобы при щелчке пользователем гиперссылок на странице Wordpress он вызывал всплывающую подсказку на карте (конкретное местоположение) и отображал детали. Как я могу это достичь?

<script type="text/javascript"> 
// Define your locations: HTML content for the info window, latitude, longitude 
var locations = [['<div class="location"><a href="#" id="Singapore"><h4 style="margin-top:8px; margin-bottom: -8px !important; color:#334354">SINGAPORE (Head Office)</h4><p>168 Jalan Bukit Merah Surbana One, <br/> Singapore 150168. <br/><p style="margin-top:13px;">Tel : +65 6248 1288 <br/>Fax : +65 6273 9090<br/>Email : <a href="mailto:mails@surbana.com" target="_top">mails@surbana.com</p></p></a></div>',1.283261, 103.818849], 

[ 'Шанхай (региональное отделение)

# 801 ZhongRong Hengrui Int'l Plaza,
620 Чжан Ян Road,
район Пудун,
Shanghai 200122, Китай.
Tel: +86 21 6881 0899
Факс: +86 21 6881 0800

'31,223363, 121,527130],

[' Шэньян

# 1503, УЯ Ляньин Commercial Tower,
1A Нанкин South Street,
Он Ping района , Шэньян КНР,
110001, Китай.
Tel: +86 24 2289 2258
Факс: +86 24 2289 2259

'41,777994, 123,403449],

[' Янгон

Unit02-03 Союз Бизнес-центр,
Nat Mauk Road, Бо Cho квартал,
Bahan Township, Yangon,
Республика Мьянма.
Тел .: +95 18603376

', 16.801551, 96.161014],];

// Настройка различных значков и теней var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

var icons = [ 
    iconURLPrefix + 'red-dot.png', 
    // iconURLPrefix + 'green-dot.png', 
    // iconURLPrefix + 'blue-dot.png', 
    // iconURLPrefix + 'orange-dot.png', 
    // iconURLPrefix + 'purple-dot.png', 
    // iconURLPrefix + 'pink-dot.png',  
    // iconURLPrefix + 'yellow-dot.png' 
] 
var icons_length = icons.length; 


var shadow = { 
    anchor: new google.maps.Point(15,33), 
    url: iconURLPrefix + 'msmarker.shadow.png' 
}; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: new google.maps.LatLng(-37.92, 151.25), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: false, 
    streetViewControl: false, 
    panControl: false, 
    zoomControlOptions: { 
    position: google.maps.ControlPosition.LEFT_BOTTOM 
    } 
}); 

var infowindow = new google.maps.InfoWindow({ 
    maxWidth: 400 
}); 

var marker; 
var markers = new Array(); 

var iconCounter = 0; 

// Add the markers and infowindows to the map 
for (var i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon : icons[iconCounter], 
    shadow: shadow 
    }); 

    markers.push(marker); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 


    iconCounter++; 
    // We only have a limited number of possible icon colors, so we may have to restart the counter 
    if(iconCounter >= icons_length){ 
    iconCounter = 0; 
    } 
} 

function AutoCenter() { 
    // Create a new viewpoint bound 
    var bounds = new google.maps.LatLngBounds(); 
    // Go through each... 
    $.each(markers, function (index, marker) { 
    bounds.extend(marker.position); 
    }); 
    // Fit these bounds to the map 
    map.fitBounds(bounds); 
} 
AutoCenter(); 

Answer 1

Поскольку это разные домены, вы должны использовать веб-сообщениями (такой же, как обмен сообщениями между документами).

Например, в передающем окне:

var o = document.getElementsByTagName('map')[0]; 
o.contentWindow.postMessage('location xyz', 'http://example.com/'); 

и в IFRAME:

function receiver(event) { 
    if (event.origin == 'http://example.net') { 
      //consume location 
    } 
} 
window.addEventListener('message', receiver, false);