Marker drag not working in iframe under Chrome and Firefox

问题

I'm working on embedding the google map, into a page, containing multiple iframes. It can happen, that I load 2 maps, into 2 different iframes at the same time. This is the reason why the Map API loaded only once, in the main document's head section:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&v=3&sensor=false" type="text/javascript"></script>

For loading the map inside the iframe, I wrote the following code, which runs inside the iframe:

var googleAPI = window.top.google;
var latLong = new googleAPI.maps.LatLng(31.7655374094844,93.515625);
var map = new googleAPI.maps.Map(document.getElementById("map-container"), {
            zoom: 8,
            center: latLong,
            mapTypeId: googleAPI.maps.MapTypeId.ROADMAP
        });

The map appears correctly on the page, without any errors. I also add a marker on the map and I want to allow the users to change the marker's position, by drag&drop

var simpleMarker = new googleAPI.maps.Marker({
        position: latLong,
        map: map,
        draggable: true,
        animation: googleAPI.maps.Animation.DROP, 
        title: 'Marker'
    });

While under IE the marker's drag&drop without any problems, under Chrome&Firefox the drag it's not working as expected: sometimes the drag stops or you even get an endless drag. My guess is that this is caused because the API was loaded in the main document, and after referenced from inside the iframes. I do not wish to change this, mostly because like I previously mentioned, I can have several maps on the page.

Is there a fix for the drag&drop issue?

I would appreciate any help you could give me, Thanks

回答1:

I don't have a solution, I'm afraid this kind of API-usage is not intended.

Take a look at the start of the API (https://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/16/10/main.js)

(function(){'use strict';var k=window/*..more code..*/}).call(this);

This function will be called in the parent document of the iframe, the variable k(which will be used internally by the API as reference to the window-object) will always refer to the parent window of the iframe what will result in incorrect values when observing events (e.g. mousemove when you drag a marker) in the iframe.

来源：https://stackoverflow.com/questions/23426835/marker-drag-not-working-in-iframe-under-chrome-and-firefox