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